Best Claude Code Skills for Next.js Development [2026]

The five best Next.js skills for AI coding agents are @vercel-labs/next-best-practices (45/50), @wsimmonds/claude-nextjs-skills (43/50), @vercel-labs/next-upgrade (41/50), @wshobson/nextjs-app-router-patterns (40/50) and @wsimmonds/nextjs-anti-patterns (39/50). We installed 15 and read every line.

Updated September 17, 2026: install counts, stars and verifications were re-read from the SkillSafe registry on September 17, 2026. The ranking is unchanged; two adoption numbers moved a lot and are noted where they appear.

Every skill here is open source, so you can read the whole archive before installing it. The two Vercel picks ship from vercel-labs/next-skills (981 GitHub stars), the bundle from wsimmonds/claude-nextjs-skills (108 stars), and the App Router pattern library from wshobson/agents (39,750 stars). The wsimmonds bundle is the only Next.js skill in the registry that publishes eval numbers:

Claude Next.js Skills is a POC bundle of automations aimed at seeing if creating skills quickly could improve the Next.js eval scores published by Vercel at https://nextjs.org/evals.

— wsimmonds/claude-nextjs-skills, README

Measured against Vercel’s 50 published Next.js evals, that bundle moved Claude Haiku 4.5 from a 32% baseline to 78% (39 of 50 passed) and Claude Sonnet 4.5 from 32% to 76% (38 of 50).

This roundup is about the framework layer, not React in general: App Router routing, SSR/SSG/ISR, middleware, server-side data patterns, upgrade migration, and the caching model that changed entirely in Next.js 16. For component composition, state management and UI libraries, see our companion article on the best AI React skills.

The 5 Best Next.js Skills at a Glance

Skill	Score	Key feature	Installs (SkillSafe / skills.sh)	Source repo
@vercel-labs/next-best-practices	45/50	3,390-line, 20-file Next.js encyclopedia	2,428 / 107,858	vercel-labs/next-skills
@wsimmonds/claude-nextjs-skills	43/50	Eval-proven 9-skill bundle, 32% to 78%	329 / 0	wsimmonds/claude-nextjs-skills
@vercel-labs/next-upgrade	41/50	Version migration workflow in 50 lines	810 / 24,093	vercel-labs/next-skills
@wshobson/nextjs-app-router-patterns	40/50	8 complete architectural patterns, 537 lines	33,228 / 24,195	wshobson/agents
@wsimmonds/nextjs-anti-patterns	39/50	944-line anti-pattern detection checklist	164 / 0	wsimmonds/claude-nextjs-skills

Installs were read from the SkillSafe registry on September 17, 2026. The second figure is the install count SkillSafe indexes from skills.sh, which is why a skill can be near-invisible on one and heavily used on the other.

Figure: the five Next.js skills that cleared the bar, scored out of 50. The spread is narrow (45 to 39) because the skills solve different problems well, not because four of them are runners-up.

How We Scored

Each skill was scored out of 50 across five dimensions:

Dimension	Max	What we looked at
Relevance	10	Does it address Next.js-specific concerns — App Router, SSR/SSG, middleware, routing, deployment?
Depth	10	Specific Next.js patterns and version-aware guidance, not repackaged React docs
Actionability	10	Can a developer follow the guidance to build better Next.js apps?
Structure	10	Well-organized with clear workflow coverage and navigability
Adoption	10	Install count, stars, verifications, and community traction

Skills that covered Next.js-specific APIs (async params, use cache, cacheLife, intercepting routes, generateStaticParams) scored higher on relevance than skills that wrapped general React advice in Next.js file paths. Skills with eval results or measurable outcomes scored higher on actionability. Adoption was scored when the review ran in April 2026; where a skill’s install count has since moved by an order of magnitude, we say so in its entry rather than silently rescoring a review we did not re-run.

1. @vercel-labs/next-best-practices — 45/50

Source: github.com/vercel-labs/next-skills — 2,428 SkillSafe installs plus 107,858 indexed from skills.sh — 9 site stars

We covered this skill in our React roundup as the top overall pick, but it deserves a dedicated look through a Next.js-specific lens. While many of its 20 reference files touch React patterns, the majority are pure Next.js framework concerns that have no equivalent in a plain React app.

The archive spans 3,390 lines across 20 files. The files that matter most for Next.js developers — and that set this skill apart from generic React advice — are file-conventions.md (140 lines on route segments, middleware-to-proxy rename in v16, and parallel route conventions), async-patterns.md (87 lines on the Next.js 15 breaking change where params and searchParams became async), self-hosting.md (371 lines on Docker output: 'standalone', cache handlers for multi-instance ISR, and what needs extra setup outside Vercel), and parallel-routes.md (287 lines covering modal patterns with @slot and (.) interceptors, default.tsx fallback behavior, and router.back() for closing).

The data-patterns.md file (297 lines) is the strongest Next.js-specific reference. It draws the line between Server Components, Server Actions, and Route Handlers with a decision framework that agents can actually follow — Server Components for reads, Server Actions for mutations with progressive enhancement, Route Handlers only for external webhooks and third-party integrations. The error-handling.md file (227 lines) covers error.tsx, global-error.tsx, not-found.tsx, and the newer forbidden() and unauthorized() functions for auth errors, plus the unstable_rethrow escape hatch for catch blocks — details that are new enough to be absent from most training data.

The debug-tricks.md file documents the Next.js MCP debug endpoint (/__next/mcp) and the --debug-build-paths flag for rebuilding specific routes. These are v16-era features that AI tools without this skill simply do not know about.

Where it loses points: The runtime-selection.md file is only 39 lines and lists runtime options without giving the agent a decision heuristic. The agent needs to know “choose Edge when your function is stateless and latency-sensitive, choose Node when you need fs, native modules, or heavy computation” — not just what the options are.

Score breakdown: Relevance 10 — Depth 10 — Actionability 9 — Structure 10 — Adoption 6

npx skills add https://api.skillsafe.ai/vercel-labs/next-best-practices

2. @wsimmonds/claude-nextjs-skills — 43/50

Source: github.com/wsimmonds/claude-nextjs-skills — 329 SkillSafe installs — 108 GitHub stars

This is not a single skill — it is a bundle of 9 focused Next.js sub-skills in one archive, plus a Vercel AI SDK skill. What makes it remarkable is that it was built with a specific, measurable goal: improving pass rates on Vercel’s official Next.js evals at nextjs.org/evals. And it has the receipts.

The README documents the results: Claude Haiku 4.5 went from a 32% baseline to 78% (39/50 evals passed), and Claude Sonnet 4.5 went from 32% to 76% (38/50). The eval results table shows pass/fail for all 50 evals across 3 runs each, with per-eval timing data (69.1s for 010-route-handlers, 312.2s for 022-prefer-server-actions). This is the only skill in the registry with published, reproducible eval numbers for Next.js development, and you can re-run the same 50 cases from nextjs.org/evals.

The 9 sub-skills map to specific Next.js problem areas, each in its own SKILL.md:

• nextjs-app-router-fundamentals/ — File conventions, layout nesting, Pages Router migration, generateStaticParams
• nextjs-server-client-components/ — Decision tree for Server vs Client, useSearchParams + Suspense requirements, React use() API
• nextjs-anti-patterns/ — 6 categories of anti-patterns with wrong/right code pairs
• nextjs-use-search-params-suspense/ — The useSearchParams + Suspense pattern that agents consistently miss
• nextjs-advanced-routing/ — Parallel routes, intercepting routes, route groups
• nextjs-dynamic-routes-params/ — Dynamic segments, catch-all routes, generateStaticParams patterns
• nextjs-server-navigation/ — Server-side redirect() vs client-side useRouter()
• nextjs-client-cookie-pattern/ — Cookie access across the server/client boundary
• nextjs-pathname-id-fetch/ — Extracting pathname parameters and fetching data by ID

Each sub-skill is independently installable on SkillSafe (individual install counts run from 82 for nextjs-use-search-params-suspense to 328 for nextjs-advanced-routing), but the bundle installs them all as a coordinated set. The combined content runs to over 5,000 lines of Next.js-specific guidance.

Where it loses points: The sub-skills share boilerplate (every one repeats the same TypeScript any warning block and common type patterns section), which adds ~30 lines of duplicated preamble per file. The bundle was designed as a proof of concept and hasn’t been updated since October 2025, so it doesn’t cover Next.js 16 features like Cache Components or the middleware-to-proxy rename. That said, the eval numbers speak for themselves — this is the most empirically validated Next.js skill in the registry.

Score breakdown: Relevance 10 — Depth 9 — Actionability 10 — Structure 7 — Adoption 7

npx skills add https://api.skillsafe.ai/wsimmonds/claude-nextjs-skills

3. @vercel-labs/next-upgrade — 41/50

Source: github.com/vercel-labs/next-skills — 810 SkillSafe installs plus 24,093 indexed from skills.sh — 480 site stars

The most-starred Next.js skill in the registry — 480 site stars against 9 for the runner-up — and it is exactly 50 lines long. That ratio — 24,903 installs across both indexes for 50 lines of instructions — tells you something about the pain point it addresses. Next.js version upgrades are the single most common source of broken AI-generated code: the agent writes code targeting Next.js 14 patterns while the project is on 15, or generates synchronous params access in a Next.js 15+ codebase where params are now async.

The skill works as a step-by-step workflow for the AI agent:

1. Detect the current Next.js version from package.json
2. Fetch the official upgrade guide via WebFetch (with URLs for the v14, v15, and v16 migration docs)
3. Determine the upgrade path — for major jumps, upgrade incrementally (13 to 14 to 15)
4. Run codemods first (npx @next/codemod@latest <transform> <path>), with three named transforms: next-async-request-api for the v15 async params change, next-request-geo-ip for the geo/IP property migration, and next-dynamic-access-named-export for dynamic import transforms
5. Update dependencies (next@latest react@latest react-dom@latest)
6. Review breaking changes and update next.config.js
7. Update TypeScript types
8. Test with npm run build and npm run dev

This is a task-oriented skill — it doesn’t teach patterns, it automates a workflow. The 480 stars (the highest of any Next.js skill by a wide margin) reflect that this is the skill people install before they do anything else with a Next.js project. It accepts a [target-version] argument, letting you specify the version you’re upgrading to.

Where it loses points: It is thin by design, which limits its depth score. It names three codemods but doesn’t explain what each one transforms or show before/after code. It doesn’t cover the Next.js 16-specific changes (Cache Components replacing experimental.ppr, middleware rename to proxy). For those you need @vercel-labs/next-best-practices alongside it. The strength is the workflow — detect, codemod, upgrade, test — and the weakness is that it delegates all the detail to the fetched docs.

Score breakdown: Relevance 10 — Depth 5 — Actionability 9 — Structure 8 — Adoption 9

npx skills add https://api.skillsafe.ai/vercel-labs/next-upgrade

@vercel-labs/next-upgrade at 50 lines and @vercel-labs/next-best-practices at 3,390 lines come from the same repo and both earned a place here, which is the clearest illustration of what the depth score is actually measuring.

Figure: thin is not the same as bad. A thin skill wins when the job is a workflow the agent can execute; a deep skill wins when the agent is missing knowledge it cannot derive.

4. @wshobson/nextjs-app-router-patterns — 40/50

Source: github.com/wshobson/agents — 33,228 SkillSafe installs plus 24,195 indexed from skills.sh — 4 site stars — 1 verification

A single 537-line file that covers 8 complete architectural patterns for the Next.js App Router, each with full TypeScript implementations. Where the Vercel skills give you reference material organized by topic, this skill gives you patterns organized by what you’re building.

The 8 patterns are:

1. Server Components with Data Fetching — Async page with searchParams, Suspense key for re-rendering on filter changes, separate data-fetching component with tag-based cache invalidation
2. Client Components with use client — Server Action integration via useTransition, error handling in the transition callback
3. Server Actions — Full mutation flow with cookies(), revalidateTag, redirect, and form data handling
4. Parallel Routes — Dashboard layout with @analytics and @team slots, independent loading states per slot
5. Intercepting Routes — Photo modal pattern with @modal/(.)photos/[id], full-page fallback, and router.back() close behavior
6. Streaming with Suspense — Product page with blocking header fetch and streamed reviews/recommendations sections
7. Route Handlers — GET/POST/dynamic route handlers with NextRequest/NextResponse, proper 404 handling
8. Metadata and SEO — generateMetadata with OpenGraph and Twitter cards, generateStaticParams for static generation, notFound() for missing resources

Each pattern is a complete, working example — not a fragment. The Server Actions pattern (Pattern 3) shows the full lifecycle from form submission to database mutation to cache invalidation to redirect, with proper error handling at each step. The Intercepting Routes pattern (Pattern 5) includes the file structure diagram, which is critical because the (.) and (..) prefix conventions are the part agents get wrong most often.

The caching strategies section at the bottom consolidates the four fetch cache options (no-store, force-cache, revalidate: N, tag-based) with their revalidateTag/revalidatePath counterparts. The do’s and don’ts summary is agent-oriented: “Don’t fetch in Client Components — use Server Components or React Query.”

Where it loses points: Its adoption score of 4 was set in April 2026, when it had 1,867 installs and was newer and less discoverable than the Vercel skills. That is the one number in this roundup that has gone the other way: as of September 17, 2026 it has 33,228 SkillSafe installs, more than the other four combined, carried by the growth of the wshobson/agents repo to 39,750 stars. On adoption alone it would score 9 today. The content critique below still stands. It doesn’t cover Next.js 16 features (Cache Components, use cache directive). The patterns are all Next.js 14+ and use await params correctly, but there’s no mention of the middleware system or deployment concerns (Docker, edge config, ISR cache handlers). For a patterns-focused skill, that’s an acceptable scope limitation; for a comprehensive Next.js reference, you’d pair it with @vercel-labs/next-best-practices.

Score breakdown: Relevance 10 — Depth 9 — Actionability 9 — Structure 8 — Adoption 4

npx skills add https://api.skillsafe.ai/wshobson/nextjs-app-router-patterns

5. @wsimmonds/nextjs-anti-patterns — 39/50

Source: github.com/wsimmonds/claude-nextjs-skills — 164 SkillSafe installs — 108 GitHub stars

A 944-line single file organized into 6 categories of Next.js anti-patterns, each with wrong/right code pairs and explanations of why the wrong pattern is wrong. This is the skill that catches the patterns AI tools default to when they don’t have Next.js-specific training: useEffect for data fetching, useState for server data, getServerSideProps in the App Router, window.location.href for navigation, and API routes as middlemen for direct database access.

The 6 categories are:

1. Inappropriate useEffect Usage (3 sub-patterns) — Using useEffect for browser detection (should be direct detection in component body), data fetching (should be async Server Component), and URL detection (should be accessed in event handler)
2. Inappropriate useState Usage (2 sub-patterns) — Using useState for server data (should be Server Component), and for derived values (should be direct computation or useMemo)
3. Pages Router Patterns in App Router (3 sub-patterns) — getServerSideProps (should be async Server Component with cache: 'no-store'), getStaticProps (should be fetch with revalidate), and next/head (should be metadata export)
4. Performance Anti-Patterns (3 sub-patterns) — Serial await (should be Promise.all or Suspense), over-using use client (should push boundary as low as possible), importing Server Components into Client Components (should use composition/children pattern)
5. Router and Navigation Anti-Patterns (2 sub-patterns) — window.location.href (should be Link or useRouter), useRouter in Server Components (should be redirect())
6. Data Fetching Anti-Patterns (2 sub-patterns) — Creating unnecessary API routes as middlemen (should access database directly in Server Components), missing loading states (should use Suspense)

The detection checklist at the bottom is the most agent-useful section — it’s a bulleted list of 11 things to check when reviewing Next.js code. An AI agent can run through this list systematically when doing code review:

• useEffect used for data fetching -> Replace with Server Component
• getServerSideProps or getStaticProps -> Migrate to async Server Components
• 'use client' on static components -> Remove directive
• Client Component importing Server Component -> Use composition pattern

The “When Client Components ARE Appropriate” section prevents over-correction. It explicitly lists 5 cases where use client is the right choice: event handlers, form state, browser APIs, third-party client libraries, and React Context consumers. This balance is important — many anti-pattern skills push agents to avoid Client Components entirely, which creates its own class of bugs.

Where it loses points: The skill doesn’t cover Next.js 16 patterns. The browser detection anti-pattern section (Anti-Pattern 1.1) is oddly specific about Safari detection, likely because it was tuned for a specific eval. Some of the “correct” examples use older patterns — for instance, the data fetching correction uses fetch() with revalidate rather than the newer use cache directive. For a skill focused on what not to do, that’s a minor gap, but teams on Next.js 16 should pair this with @vercel-labs/next-cache-components for the current caching model.

Score breakdown: Relevance 9 — Depth 9 — Actionability 9 — Structure 7 — Adoption 5

npx skills add https://api.skillsafe.ai/wsimmonds/nextjs-anti-patterns

Frequently Asked Questions

How is this different from the React skills roundup?

Our React skills roundup covers skills for React development broadly — component composition, state management, UI libraries like shadcn/ui. Two skills from that article (@vercel-labs/next-best-practices and @vercel-labs/next-cache-components) overlap because they are both React skills and Next.js skills. This article focuses exclusively on what makes Next.js different from plain React: the App Router file system, server-side rendering modes, middleware, routing conventions, version upgrades, and the caching architecture. If you use Next.js, install skills from both lists. If you use Vite + React or Remix, this list won’t apply to your stack.

Can I install the wsimmonds sub-skills individually instead of the bundle?

Yes. Each of the 9 sub-skills in @wsimmonds/claude-nextjs-skills is published separately on SkillSafe — for example, @wsimmonds/nextjs-anti-patterns (164 installs) and @wsimmonds/nextjs-server-client-components (82 installs). If you only need help with one area, install the individual skill. The bundle is for teams that want comprehensive coverage and are willing to accept the duplicated preamble across files. The eval results in the README were measured with all 9 sub-skills active simultaneously.

Do these skills work with Claude Code, Cursor, and Windsurf?

All five skills install cleanly in Claude Code and Cursor (SkillSafe creates symlinks to both .claude/skills/ and .cursor/skills/ automatically). The three Vercel skills are tagged for Claude Code, Cursor, Windsurf, Codex CLI, and AMP. The wsimmonds skills specify allowed-tools: Read, Write, Edit, Glob, Grep, Bash in their frontmatter, which is Claude Code-specific — other tools will use the content as context but won’t enforce the tool restrictions.

Where do I find a full list of Claude Code skills on GitHub?

Most Next.js skills live inside larger monorepos rather than standalone repositories: vercel-labs/next-skills holds both Vercel picks, and wshobson/agents holds the App Router patterns under plugins/frontend-mobile-development/skills/. Curated indexes such as travisvn/awesome-claude-skills list more. Every skill in this article links back to its exact source path from its SkillSafe page.

Do these skills cover Next.js 16?

Only partly, and this is the roundup’s biggest caveat. @vercel-labs/next-best-practices documents v16-era features including the middleware-to-proxy rename, the /__next/mcp debug endpoint and the --debug-build-paths flag. The other four were last updated before Next.js 16 shipped: the wsimmonds bundle is pinned at version 2025.10.24. On a v16 project, pair one of them with @vercel-labs/next-cache-components (1,626 installs) for the current caching model.

Conclusion

If you install one skill from this list, install @vercel-labs/next-best-practices — 3,390 lines across 20 files covering every Next.js-specific concern from file conventions to self-hosting Docker configuration. If you want empirical proof that skills improve AI-generated Next.js code, install @wsimmonds/claude-nextjs-skills — the eval results (32% to 78% pass rate) are published and reproducible.

For version upgrades, @vercel-labs/next-upgrade is the highest-signal install in the registry at 480 site stars and 24,903 installs across both indexes. Pair it with @wshobson/nextjs-app-router-patterns for 8 complete architectural patterns that cover the App Router workflows agents need most. And for code review, @wsimmonds/nextjs-anti-patterns gives your agent a systematic 11-point checklist for catching the patterns AI tools default to without framework-specific guidance.

# Install all five
npx skills add https://api.skillsafe.ai/vercel-labs/next-best-practices
npx skills add https://api.skillsafe.ai/wsimmonds/claude-nextjs-skills
npx skills add https://api.skillsafe.ai/vercel-labs/next-upgrade
npx skills add https://api.skillsafe.ai/wshobson/nextjs-app-router-patterns
npx skills add https://api.skillsafe.ai/wsimmonds/nextjs-anti-patterns

Related roundups: Browse all Best Of roundups