🧠 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 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) |
🎨 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 | 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 schema, migrations, RLS and query performance (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 | Simplifies recently changed code while preserving behavior |
| e2e-tester | Tests real user flows in the browser and fixes verified defects |
🔧 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 |
| skill-creator | anthropics/skills (extended) | Apache 2.0 |
| 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.