🧠 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-skills from 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.

[AG