Next.js AI Skills plugin
A plugin of 24 Claude Code skills for AI apps on Next.js, AI SDK 7, shadcn/ui and pgvector, with in-browser UI checks
- 71 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skills give the agent commands for Bun, hcloud and the browser, and mcp.json launches the third-party Next.js DevTools MCP server through npx
- The hetzner-cloud skill works with Hetzner cloud infrastructure through a token
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/next-js-ai-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skills give the agent commands for Bun, hcloud and the browser, and mcp.json launches the third-party Next.js DevTools MCP server through npx
- The hetzner-cloud skill works with Hetzner cloud infrastructure through a token
This is third-party code. Review the repository files before installing.
What it does
The nextjs-ai-skills plugin bundles 24 skills around one stack: Next.js 16, the Vercel AI SDK, shadcn/ui, Bun and Postgres with pgvector. The ai-app skill builds a whole application, from a chatbot to an agent dashboard, and defaults to AI SDK 7. Next to it sit nextjs-shadcn for the scaffold, frontend-design and web-design-guidelines for UI direction and review, ai-sdk-6 and ai-sdk-7 for version-specific guidance, postgres-semantic-search for vector and hybrid search, and next-best-practices, cache-components and nextjs-seo for the framework itself. The go skill runs a browser smoke test: it opens the page and checks that recent UI changes work. The chrome-devtools skill connects Chrome DevTools MCP for inspecting the DOM, console, network and performance. The tooling group has handoff (a HANDOFF.md file so a fresh agent can continue), agent-harness-review and hetzner-cloud for managing Hetzner Cloud through hcloud. The plugin also starts the Next.js DevTools MCP server from mcp.json. The /nextjs-ai-skills:ai-app and /nextjs-ai-skills:go slash commands run the main flows, and the other skills activate from the context of a request. The same skills can be copied into .claude/skills/ or .agents/skills/ for Claude Code and Codex.
Who it is for. Web developers building chatbots, agents and dashboards on Next.js who want to give Claude Code ready rules for that stack.
Good fit when
- A new chat app on AI SDK 7: scaffold, shadcn/ui interface and model wiring created in one flow
- The project stays on AI SDK 6 and the agent needs version-specific guidance plus a path to 7
- A Postgres database needs semantic or hybrid search through pgvector
- After a UI edit a browser smoke test is needed, and the go flow opens the page and checks it
- The work day ended halfway and the handoff skill writes HANDOFF.md for the next agent
Not a fit when
- A different stack: the skills target Next.js, Bun and the Vercel AI SDK, with no separate rules for other frameworks
- You want a chatbot on an old template: the nextjs-chatbot skill is frozen and no longer updated
- The app builds on the elements.ai-sdk.dev library: for new projects the author points to shadcn/ui AI Elements, and the old library is deprecated at the end of November 2026
- You need a minimal install: the plugin brings 24 skills and some will surely go unused
Example request
Build a chatbot on Next.js with AI SDK 7 and shadcn/ui, add pgvector for document search and check the result in the browserLimitations
- The skills target Next.js 16, Bun and AI SDK 6 or 7, and other versions need checking against the installed packages.
- The nextjs-chatbot skill is frozen by the author and not updated.
- The AI Elements library from elements.ai-sdk.dev is marked deprecated at the end of November 2026, and shadcn/ui AI Elements is prescribed for new interfaces.
- The chrome-devtools skill needs Chrome and Chrome DevTools MCP.
- The hetzner-cloud skill requires the hcloud CLI and a Hetzner token.
- Some skills build on outside sources (Vercel, Supabase), and the README has a table of origins. The license is MIT.
How to disable. The plugin is removed with /plugin uninstall nextjs-ai-skills@laguagu. If it was installed under the old name claude-code-nextjs-skills, uninstall that one the same way. Manually copied skill folders are deleted from .claude/skills/ or .agents/skills/.
FAQ
How do I install Next.js AI Skills in Claude Code?
Run /plugin marketplace add laguagu/claude-code-nextjs-skills and /plugin install nextjs-ai-skills@laguagu. Updating takes claude plugin marketplace update laguagu and claude plugin update nextjs-ai-skills@laguagu.
Does the set work in Codex?
Yes, skill folders are copied into .agents/skills/ for a project or ~/.agents/skills/ for all projects. Clients supporting the Agent Plugins format read the root plugin.json.
Which AI SDK version does the skill pick by default?
AI SDK 7 for a new app, with ai@7 and @ai-sdk/react@4. It keeps version 6 only when a required dependency pins it.
How can the agent inspect the console and network of a page?
The chrome-devtools skill connects Chrome DevTools MCP. Through it the agent reads the DOM, console, network requests and performance metrics.
What is in the plugin mcp.json?
The Next.js DevTools MCP server, started over stdio with npx -y next-devtools-mcp@latest. Chrome DevTools MCP is set up separately following the chrome-devtools skill.
Discussion
No questions or reviews yet.
Related
PluginsClaude Code Skills and Agents
Claude Code Skills & Agents
A Claude Code plugin bundling skills and sub-agents: deep research, image generation, GitHub work, code review and model switching
A Claude Code marketplace of 19 plugins and 76 skills for frontend, backend, DevOps and security, with a skill chain command
15 skills for Claude Code and Codex: Laravel, Docker, UI, debugging, tests and docs in four ready plugin bundles
ClaudeKit Skills
ClaudeKit - Agent Skills
A plugin marketplace for Claude Code with a set of thirty-plus skills: frontend, backend, devops, databases, documents, debugging and MCP work
A set of 116 skills, 44 agents and safety hooks for Claude Code, Cursor, Codex, Gemini CLI and nine more editors
Over twenty skills for coding agents: MCP and hooks, plan mode, a bug-fix protocol, prompting and a bash safety hook
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Next.js AI Skills (this card) | no | 71 | ||
| Next.js skills | no | 143,488 | a skill set for Next.js only, without the AI SDK, vector search and browser checks | |
| Next.js DevTools MCP | yes | not required | 836 | the Next.js diagnostics MCP server, which this plugin connects as one of its parts |
README in short
The README opens with a quick start of two /plugin commands and the two main flows. The 24 skills are then grouped as app generators, UI, Next.js, AI SDKs, databases and search, and tooling. It separately mentions mcp.json, an example global instruction file for long autonomous runs and installation without the plugin, and ends with a table of sources.
README badge
Original SKILL.md
--- name: ai-app description: >- Builds full-stack Next.js AI applications with the AI SDK and the shadcn/ui AI Elements patterns. Use when creating a chatbot, agent dashboard or custom AI application. --- # AI application setup Build the requested app around its users, data and operations. Keep the existing stack and SDK major unless migration is part of the task; use Bun for new JavaScript projects. 1. Resolve the installed AI SDK major through `ai-sdk`; use `ai-sdk-6` or `ai-sdk-7` for implementation. For a new app, default to **AI SDK 7**: `ai@7`, `@ai-sdk/react@4` and each provider package at `latest` (provider majors differ; Node.js 22+). Keep v6 only when a required dependency pins it. Build new chat UI from the AI Elements patterns in shadcn/ui (https://ui.shadcn.com/docs/ai-elements); they need no v7 patch. The older elements.ai-sdk.dev library (`ai-elements`) will be deprecated at the end of November 2026, targets v6, and its `context.tsx` fails a v7 typecheck until patched. Read version-matched `ai/docs/` and provider docs before using web examples. 2. Use `nextjs-shadcn` for framework setup and `frontend-design` for visual direction. Compose chat UI from the shadcn/ui patterns (Message, Bubble, Message Scroller, Trace; the `shadcn` skill). For a chatbot, shadcn-ui/chatbot-template is a starting point after upgrading its Next.js (16.3.6) to a release without open security advisories (16.4.5+ on 2026-11-09). Use `ai-elements` only for components already copied from elements.ai-sdk.dev. Inspect installed source instead of assuming registry props. 3. Keep provider credentials and authorization on the server. Resolve model IDs from configuration or the selected provider's catalog. 4. Implement the smallest complete user flow. Add persistence, approvals, attachments, search, suggestions or dashboards when the app needs them. 5. Match the server stream to the client transport. Verify a second turn, relevant tool states, safe failures and mobile behavior, alongside the project's typecheck/build. ## Read for the app being built - [Chatbot](references/chatbot.md): conversation and stream contracts. - [Agent dashboard](references/agent-dashboard.md): execution, approval and run state. - [Examples](references/examples.md): current official implementations.