laguagu/claude-code-nextjs-skills
Developer toolsClaude Code skills for AI apps • Next.js 16 • AI SDK 7 • pgvector • bun
Overview
Skills for building AI applications, especially Next.js + bun runtime. Packaged as an Agent Plugin (v1.0.0), so the same skills load in Claude Code, ChatGPT, Codex, Cursor, GitHub Copilot, VS Code and Kiro. See Installation. Example agents for common workflows. Installed automatically with the plugin; otherwise copy to .claude/agents/. Skills under 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. The repo doubles as its own marketplace, so no clone is needed: That installs all 23 skills, both agents, and the two MCP servers from .mcp.json.
README
🧠 Claude Code AI Skills
25 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) |
🎨 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 |
|---|---|
| skill-creator | Create, test, and optimize custom skills (extended) |
| 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 |
| 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.
Recommended Tools
Try a different keyword or remove a filter.
Install
npx skillfish add laguagu/claude-code-nextjs-skills