Best Claude Code skills for Next.js
Claude Code writes Next.js code fast, but it makes the same mistakes on many projects. It mixes the App Router and the old Pages Router in one answer. It puts hooks in Server Components, forgets the 'use client' line, and fetches data in useEffect where a server fetch fits. Caching rules changed between Next.js versions, so stale advice is common.
A skill is a SKILL.md file with instructions Claude Code loads when a task matches. A good Next.js skill states the App Router rules one time, so you stop repeating them in prompts.
Our database holds 196 open-license skills built for Next.js (SkillsPicker Next.js page). These 3 are a good start for most App Router projects.
3 picks to start with
1. nextjs-app-router-patterns (wshobson/agents, MIT) Covers Next.js 14+ App Router with Server Components, streaming, parallel routes and data fetching.
npx skills add wshobson/agents --skill nextjs-app-router-patterns --agent claude-code
2. optimized-nextjs-typescript (Mindrally/skills, Apache-2.0) Next.js and TypeScript practices with a focus on performance, security and clean structure.
npx skills add Mindrally/skills --skill optimized-nextjs-typescript --agent claude-code
3. react-patterns (giuseppe-trisciuoglio/developer-kit, MIT) React 19 patterns: Server Components, Server Actions, useOptimistic, useActionState, useTransition and Suspense.
npx skills add giuseppe-trisciuoglio/developer-kit --skill react-patterns --agent claude-code
The npx skills command comes from the open skills CLI. The --agent claude-code flag puts the skill where Claude Code looks for it.
Where Claude Code loads skills
Claude Code reads project skills from .claude/skills/ in your repo and personal skills from ~/.claude/skills/ in your home folder (Claude Code skills docs). Commit project skills so the whole team gets them. Our guide on how to install Claude Code skills covers each method.
What to add next
Three skills cover the framework. Most Next.js repos need these on top:
- A testing skill for components and routes, matched to your test runner.
- A review skill that checks server and client boundaries before you merge.
- Skills for your stack: your ORM, your auth library, your UI kit. These differ per repo, which is why a generic top 10 list misses.
For MCP servers versus skills, see Claude skills vs MCP. For React without Next.js, see React skills and our Claude Code skills for React guide.
Get picks for your exact repo
The free scan reads your repo URL or a description and shows how many skills match, plus 2 picks. The full curated list costs $9, paid one time: up to 30 picks ranked, with install commands, a reason for each and notes on overlaps (pricing).
FAQ
Does Next.js have an official skill for Claude Code? The 3 picks above come from open-license community repos. Check each repo's license and read the SKILL.md before you install.
Do these skills work in Cursor or Codex?
SKILL.md is a shared format. Change the --agent flag to cursor or codex and the CLI installs to that agent's folder.
How many skills should I install? Start with 3 to 5 that match your stack. A pile of overlapping skills can give Claude Code mixed instructions.
Do I need an MCP server for Next.js? Not to start. Skills hold instructions. MCP servers connect tools and data. Add an MCP server when Claude Code needs to call something outside the repo.
Checked 2026-10-23. Prices and policies change. Confirm on the source before you buy.
Sources
- https://skillspicker.com/skills/nextjs/
- https://skillspicker.com/pricing/
- https://code.claude.com/docs/en/skills
- https://github.com/vercel-labs/skills
More guides
- Best Claude Code skills for Python: 6 free picks and how to install them (2026)
- Claude Code skills for React and React Native: 6 free picks (2026)
- Claude skills vs MCP servers: what each one does and when to use both (2026)
- Codex skills: where Codex loads them, how to install, and how to use Claude skills in Codex (2026)
- Gemini CLI skills: where they live, how to install them, and 3 to try (2026)
- How to install Claude Code skills: folders, GitHub, and global installs (2026)