🧠 Claude Code AI Skills
24 skills and 2 agents for building AI applications with Next.js, Bun and modern UI tools.
⚡ Quick Start
Install in Claude Code:
/plugin marketplace add laguagu/claude-code-nextjs-skills
/plugin install claude-code-nextjs-skills@laguagu
Then use /claude-code-nextjs-skills:ai-app to build an app or
/claude-code-nextjs-skills:go to check it in the browser. Relevant skills can also
activate from your request.
📋 Skills
🚀 App Generators
| Skill | Description |
|---|---|
| ai-app | Full-stack AI app (chatbots, agents, dashboards) |
| nextjs-shadcn | Next.js + shadcn/ui with deliberate typography, backgrounds, and design-system lint via @shadcn/lint |
| nextjs-chatbot | Web chatbot patterns (HITL, persistence, streaming) |
🎨 UI & Design
| Skill | Description |
|---|---|
| shadcn | shadcn/ui component management |
| icons | Sourcing icons, flags, file-type badges and brand logos (Iconify, svgl) |
| frontend-design | Production-grade frontend interfaces |
| web-design-guidelines | UI/UX review against Web Interface Guidelines |
| chrome-devtools | Live browser inspection via Chrome DevTools MCP (DOM, console, network, performance) |
| go | Browser smoke test — verify recent UI changes work |
⚡ Next.js
| Skill | Description |
|---|---|
| next-best-practices | Installed-version docs for routing, RSC and Next.js integration |
| react-best-practices | React/Next.js performance optimization (Vercel) |
| cache-components | Cache Components, freshness, invalidation and isolation |
| nextjs-seo | SEO (metadata, sitemaps, JSON-LD) |
| vercel-react-view-transitions | React View Transitions and navigation motion |
🤖 AI SDKs
| Skill | Description |
|---|---|
| ai-sdk | Vercel AI SDK version discovery and documentation |
| ai-sdk-6 | AI SDK v6 (agents, streaming, tools) |
| ai-sdk-7 | AI SDK v7 (WorkflowAgent, harnesses, v6→v7 migration) |
| ai-elements | AI Elements UI components |
| openai-agents-sdk | OpenAI Agents SDK (Python) |
🗄️ Database & Search
| Skill | Description |
|---|---|
| postgres-semantic-search | pgvector semantic & hybrid search |
| supabase-postgres-best-practices | Postgres optimization (Supabase) |
🛠️ Tooling
| Skill | Description |
|---|---|
| skill-creator | Create, test, and optimize custom skills (extended) |
| handoff | Write a HANDOFF.md so a fresh agent can continue your work |
| hetzner-cloud | Hetzner Cloud infrastructure via the hcloud CLI |
🤖 Custom Agents
Example agents for common workflows. Installed with the Claude Code plugin; otherwise copy to
.claude/agents/.
| Agent | Description |
|---|---|
| code-simplifier | Refines code for clarity (DRY/KISS/YAGNI) |
| e2e-tester | E2E testing via DevTools MCP, Playwright, or Claude in Chrome |
📦 Based On
| Skill | Original Source | License |
|---|---|---|
| ai-sdk | vercel/ai | Apache 2.0 |
| cache-components | vercel-labs/next-skills (archived; maintained locally) | MIT |
| react-best-practices | vercel-labs/agent-skills | - |
| skill-creator | anthropics/skills (extended) | Apache 2.0 |
| next-best-practices | vercel-labs/next-skills (archived; maintained locally) | - |
| web-design-guidelines | skills.sh/vercel-labs/agent-skills | - |
| supabase-postgres-best-practices | supabase/agent-skills | MIT |
| chrome-devtools | addyosmani/agent-skills | - |
| shadcn | shadcn/ui | MIT |
📥 Other Installation Options
- Individual skills: copy a skill folder and any referenced sibling skills to
.claude/skills/(Claude Code) or.agents/skills/(Codex). User-wide locations are~/.claude/skills/and~/.agents/skills/. - Plugin-capable clients: the root plugin.json uses Agent Plugins format. Check your client's support and loading instructions; the format alone does not guarantee compatibility.
- Local Claude Code trial: clone this repo and run
claude --plugin-dir ./claude-code-nextjs-skillsfrom its parent directory.
🔧 MCP & Project Rules
mcp.json configures Next.js DevTools and the AI Elements registry. Both plugin manifests use this single configuration. Optional Chrome DevTools MCP setup is in the browser testing skill.
AGENTS.md contains an example of Next.js-generated project rules; CLAUDE.md references it. These root files guide work on the repository; installing the plugin does not load them as project context.
examples/global-agents.md is a user-wide instruction file for long autonomous runs: when to keep going, when to stop, and how to report.
🔄 Updating
In Claude Code, run /plugin marketplace update laguagu, then
/plugin update claude-code-nextjs-skills@laguagu.
Maintainers: compare upstream updates before merging so local customizations and
licenses survive. Validate skills with
uvx --from skills-ref agentskills validate <skill-folder> and manifests with
claude plugin validate .claude-plugin/plugin.json and
claude plugin validate .claude-plugin/marketplace.json.
📚 See Also
agents-best-practices — skill auditing, creation and discovery across agent tools.
📄 License
MIT for original repository content. Bundled skills retain their upstream licenses and attribution; see Based On.