claude-code-nextjs-skills
laguagu · laguagu/claude-code-nextjs-skills
This collection offers 24 Claude Code skills and 2 agents for building full-stack AI applications with Next.js 16, AI SDK 7, pgvector, and Bun, including app generators and UI design tools.
Claude Code skills for AI apps • Next.js 16 • AI SDK 7 • pgvector • bun
Preview
What you can do with it
- Generate a full-stack AI application like a chatbot, agent, or dashboard with a single command.
- Develop production-grade frontend interfaces and manage shadcn/ui components effectively.
- Perform browser smoke tests and inspect the DOM with Chrome DevTools via Claude Code.
Safety check
No risky patterns found in the files we scanned.
Automated scan of the repo files. Always review code you run.
From the README
🧠 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.
[AG