Claude Code Nextjs Skills

🧠 Claude Code AI Skills

> Skills for building AI applications, especially Next.js + bun runtime.

⚡ Quick Start

# Start a full-stack AI app
/ai-app

# Or use individual skills as needed
/ai-sdk-6              # AI agents & streaming
/postgres-semantic-search  # Vector/hybrid search

📋 Skills

🚀 App Generators

| Skill | Description | |-------|-------------| | [ai-app](skills/ai-app/) | Full-stack AI app (chatbots, agents, dashboards) | | [nextjs-shadcn](skills/nextjs-shadcn/) | Next.js 16 + shadcn/ui + bun | | [nextjs-chatbot](skills/nextjs-chatbot/) | Production chatbot (HITL, persistence, GDPR) |

🎨 UI & Design

| Skill | Description | |-------|-------------| | [shadcn](skills/shadcn/) | shadcn/ui component management | | [frontend-design](skills/frontend-design/) | Production-grade frontend interfaces | | [web-design-guidelines](skills/web-design-guidelines/) | UI/UX review against Web Interface Guidelines | | [chrome-devtools](skills/chrome-devtools/) | Live browser inspection via Chrome DevTools MCP (DOM, console, network, performance) | | [go](skills/go/) | Browser smoke test — verify recent UI changes work |

⚡ Next.js

| Skill | Description | |-------|-------------| | [next-best-practices](skills/next-best-practices/) | RSC, async APIs, routing, optimization | | [react-best-practices](skills/react-best-practices/) | React/Next.js performance optimization (Vercel) | | [cache-components](skills/cache-components/) | Cache Components & PPR | | [nextjs-seo](skills/nextjs-seo/) | SEO (metadata, sitemaps, JSON-LD) |

🤖 AI SDKs

| Skill | Description | |-------|-------------| | [ai-sdk](skills/ai-sdk/) | Vercel AI SDK general guide (official) | | [ai-sdk-6](skills/ai-sdk-6/) | AI SDK v6 (agents, streaming, tools) | | [ai-elements](skills/ai-elements/) | AI Elements UI components | | [openai-agents-sdk](skills/openai-agents-sdk/) | OpenAI Agents SDK (Python) |

🗄️ Database & Search

| Skill | Description | |-------|-------------| | [postgres-semantic-search](skills/postgres-semantic-search/) | pgvector semantic & hybrid search | | [supabase-postgres-best-practices](skills/supabase-postgres-best-practices/) | Postgres optimization (Supabase) |

🛠️ Tooling

| Skill | Description | |-------|-------------| | [skill-creator](skills/skill-creator/) | Create, test, and optimize custom skills (extended) | | [handoff](skills/handoff/) | Write a HANDOFF.md so a fresh agent can continue your work |

🤖 Custom Agents

Example agents for common workflows. Copy to .claude/agents/ to use.

| Agent | Description | |-------|-------------| | [code-simplifier](agents/code-simplifier.md) | Refines code for clarity (DRY/KISS/YAGNI) | | [nextjs-reviewer](agents/nextjs-reviewer.md) | Review reports for Next.js projects | | [e2e-tester](agents/e2e-tester.md) | E2E testing via DevTools MCP, Playwright, or Claude in Chrome |

📦 Based On

| Skill | Original Source | License | |-------|-----------------|---------| | [ai-sdk](skills/ai-sdk/) | vercel/ai | Apache 2.0 | | [cache-components](skills/cache-components/) | vercel/next.js | MIT | | [react-best-practices](skills/react-best-practices/) | vercel-labs/agent-skills | - | | [skill-creator](skills/skill-creator/) | anthropics/skills (extended) | Apache 2.0 | | [next-best-practices](skills/next-best-practices/) | skills.sh/vercel-labs/next-skills | - | | [web-design-guidelines](skills/web-design-guidelines/) | skills.sh/vercel-labs/agent-skills | - | | [supabase-postgres-best-practices](skills/supabase-postgres-best-practices/) | supabase/agent-skills | MIT | | [chrome-devtools](skills/chrome-devtools/) | addyosmani/agent-skills | - | | [shadcn](skills/shadcn/) | shadcn/ui | MIT |

🔄 Updating

Skills under [Based On](#-based-on) drift as their upstreams change. To refresh one: fetch the upstream folder, diff it against the local copy, and copy over the changed content files — but keep the local SKILL.md frontmatter, since name/description and cross-skill references are often customized. Skip a blind npx skills update: there is no lock file and some folders are renamed from upstream.

📥 Installation

Copy or symlink skills to:

• Claude Code: ~/.claude/skills/ (global) or .claude/skills/ (project)
• Other agents (Codex, Windsurf, Cursor): ~/.agents/skills/ or .agents/skills/

🔧 MCP Servers

Recommended MCP servers that pair with these skills:

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    },
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

• Next.js DevTools MCP — pairs with next-best-practices, e2e-tester
• Chrome DevTools MCP — pairs with chrome-devtools, go, e2e-tester. Install via CLI: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

📚 See Also

• agents-best-practices — .agents-first best practices, auditing (improving-skills), skill creation (skill-creator), and discovery (skill-finder) for cross-platform agent skills

📄 License

MIT (this repository)

Some skills are extended from open source originals — see [Based On](#-based-on) for details.

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: laguagu
• Source: laguagu/claude-code-nextjs-skills
• License: MIT

Install and usage instructions live in the source repository linked above.