--- title: "claude-code-nextjs-skills" description: "Agent skills for building Next.js + AI SDK applications: app scaffolding, shadcn/ui, RSC and caching, pgvector search, SEO, and browser verification." canonical: https://agentpluginsdirectory.com/plugins/claude-code-nextjs-skills last-updated: 2026-09-25 --- # claude-code-nextjs-skills Agent skills for building Next.js + AI SDK applications: app scaffolding, shadcn/ui, RSC and caching, pgvector search, SEO, and browser verification. - Slug: claude-code-nextjs-skills - Publisher: laguagu - Repository: https://github.com/laguagu/claude-code-nextjs-skills - Manifest: plugin.json - Version: 1.0.4 - License: MIT - Category (editorial): design-frontend - Skills: 24 (ai-app, ai-elements, ai-sdk-6, ai-sdk-7, ai-sdk, cache-components, chrome-devtools, frontend-design, go, handoff, hetzner-cloud, icons, next-best-practices, nextjs-chatbot, nextjs-seo, nextjs-shadcn, openai-agents-sdk, postgres-semantic-search, react-best-practices, shadcn, skill-creator, supabase-postgres-best-practices, vercel-react-view-transitions, web-design-guidelines) - MCP servers: 2 (ai-elements, next-devtools) - Stars: 67 - Repository created: 2026-01-11 - Repository last pushed: 2026-09-24 - Publisher type: User - Listing: https://agentpluginsdirectory.com/plugins/claude-code-nextjs-skills - Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json ## What claude-code-nextjs-skills does, in the publisher's words > 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. From the project README, punctuation lightly normalized. Full text: https://raw.githubusercontent.com/laguagu/claude-code-nextjs-skills/HEAD/README.md ## Skills - ai-app: Full-stack AI application generator with Next.js, AI SDK, and ai-elements. Use when creating chatbots, agent dashboards, or custom AI applications. Triggers: chatbot, chat app, agent dashboard, AI application, Next.js AI, useChat, streamText, ai-elements, build AI app, create chatbot - ai-elements: Build AI chat interfaces with pre-built shadcn-style components (Message, Conversation, PromptInput, Reasoning, Sources, Tool, Artifact, CodeBlock, Suggestion, Task, Image, ChainOfThought, InlineCitation, WebPreview, Checkpoint, Plan, Queue, ModelSelector, and more). Use when adding AI chat UI to a… - ai-sdk-6: Vercel AI SDK v6 development. Use when building AI agents, chatbots, tool integrations, streaming apps, or structured output with the ai package. Covers ToolLoopAgent, useChat, generateText, streamText, tool approval, smoothStream, provider tools, MCP integration, and Output patterns. - ai-sdk-7: Vercel AI SDK v7 development and migration. Use when building or upgrading AI SDK 7 apps, especially ToolLoopAgent, WorkflowAgent, HarnessAgent, Claude Code/Codex/Pi harnesses, runtimeContext, toolsContext, toolApproval, telemetry, reasoning, file or skill uploads, realtime, video generation, or v6… - ai-sdk: Answer questions about the AI SDK and help build AI-powered features. Use when developers ask about Vercel AI SDK, generateText, streamText, ToolLoopAgent, useChat, providers, tools, structured output, embeddings, streaming, or adding AI to an app. First identify the installed major version and rou… - cache-components: Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). Use when implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content bou… - chrome-devtools: Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance (LCP/CLS/INP), or verify visual output with real runtime data. Complements Play… - frontend-design: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults. - go: Opens the running app in a browser and verifies recent UI changes actually work. Use whenever the user wants a quick smoke test or sanity check of recent work, or says "go", "open in browser", "check in browser", "test your work", "make sure it works", "smoke test", "verify", "did it actually work"… - handoff: Write or update a HANDOFF.md so a fresh agent can continue this work. Use when the user says "handoff", "compact this", "context is full", or "/clear and continue". - hetzner-cloud: Manage Hetzner Cloud infrastructure with the `hcloud` CLI, servers, networks, firewalls, load balancers, volumes, DNS zones, SSH keys, primary/floating IPs, snapshots, certificates, placement groups, storage boxes. Use whenever the user mentions Hetzner, hcloud, VPS provisioning, or Hetzner locati… - icons: Find, fetch, and install the right icon or logo from the right source, brand marks, country flags, file-type icons (PDF, DOCX, ZIP), and UI glyphs, and keep them visually consistent with the app. Use when the project's icon library has no match, when svgl comes up empty, or when the user asks for… - next-best-practices - nextjs-chatbot - nextjs-seo - nextjs-shadcn - openai-agents-sdk - postgres-semantic-search - react-best-practices - shadcn - skill-creator - supabase-postgres-best-practices - vercel-react-view-transitions - web-design-guidelines Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized. ## MCP servers - ai-elements: transport: stdio; command: npx -y mcp-remote https://registry.ai-sdk.dev/api/mcp - next-devtools: transport: stdio; command: npx -y next-devtools-mcp@latest Read from the plugin's own mcp.json. Environment variable names only, never values.