Claude Code Nextjs Skills MCP Server

🧠 Claude Code AI Skills

24 skills 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 nextjs-ai-skills@laguagu

Then use /nextjs-ai-skills:ai-app to build an app or /nextjs-ai-skills:go to check it in the browser. Relevant skills also activate from your request.

To update, run claude plugin marketplace update laguagu and then claude plugin update nextjs-ai-skills@laguagu in a shell. If you installed the plugin under its old name claude-code-nextjs-skills, uninstall that and install nextjs-ai-skills@laguagu.

📋 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). Frozen: kept as it was, no longer updated

🎨 UI & Design

Skill	Description
shadcn	shadcn/ui component management
icons	Sourcing icons, flags, file-type badges and brand logos (Iconify, svgl)
frontend-design	Distinctive visual direction and typography for new or reshaped UI
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	Existing elements.ai-sdk.dev AI Elements installs (deprecated upstream end of November 2026; new chat UI uses shadcn/ui AI Elements)
openai-agents-sdk	OpenAI Agents SDK (Python)

🗄️ Database & Search

Skill	Description
postgres-semantic-search	pgvector semantic & hybrid search
supabase-postgres-best-practices	Postgres schema, migrations, RLS and query performance (Supabase)

🛠️ Tooling

Skill	Description
agent-harness-review	Review subagent use, skill and plugin load, and agent design against Anthropic's, Cognition's and 2026 research findings
handoff	Write a HANDOFF.md so a fresh agent can continue your work
hetzner-cloud	Hetzner Cloud infrastructure via the hcloud CLI

🔧 Also Included

• mcp.json starts the Next.js DevTools MCP server with the plugin. Chrome DevTools MCP setup is in the chrome-devtools skill.
• examples/global-agents.md is an example user-wide instruction file for long autonomous agent runs.

📥 Without the Plugin

Copy a skill folder, and any sibling skill it references, to .claude/skills/ (Claude Code) or .agents/skills/ (Codex); for all projects, use ~/.claude/skills/ or ~/.agents/skills/. Clients that support the Agent Plugins format can read the root plugin.json.

📦 Based On

Skill	Original Source	License
ai-sdk	vercel/ai	Apache 2.0
cache-components	vercel-labs/next-skills (now in vercel/next.js; maintained here)	-
react-best-practices	vercel-labs/agent-skills	MIT
next-best-practices	vercel-labs/next-skills (now in vercel/next.js; maintained here)	-
web-design-guidelines	vercel-labs/agent-skills	MIT
supabase-postgres-best-practices	supabase/agent-skills	MIT
chrome-devtools	addyosmani/agent-skills	MIT
shadcn	shadcn/ui	MIT
ai-elements	vercel/ai-elements	Apache 2.0
frontend-design	anthropics/skills	Apache 2.0
vercel-react-view-transitions	vercel-labs/agent-skills	MIT

📚 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.