Best React and Next.js skills for Claude Code in 2026

We sorted the React and Next.js tag by installs, dropped anything whose repository was last pushed before July 2026, and read the remaining SKILL.md files. A skill stayed if its advice would still be right on React 19 and Next.js 15 or later, if it says something a senior React engineer would not consider obvious, and if the author is accountable for it, meaning a maintainer of the library or a named engineer with a public track record.

Three of the eight come from vercel-labs/agent-skills. That is the reality of this category: the company that maintains Next.js also writes the most careful skills for it. We balanced with the shadcn team, Emil Kowalski, Addy Osmani and wshobson's larger collection.

What it does: performance rules from Vercel Engineering, organised by impact: eliminate request waterfalls, keep the client bundle small, avoid re-render storms, use the right caching layer. The entry file is 7.3 KB and points to 76 rule files the agent opens only when relevant. About 687K installs, 30.8K stars, updated 2026-08-28, no scripts.

When to use it: writing or reviewing any React or Next.js code. It is the closest thing to a default. The catch: some rules assume deployment on Vercel (edge caching, image optimisation) and will nudge you toward that platform if you are on something else.

npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y

What it does: teaches compound components, render-as-children, context scoping and the other ways to avoid a component with eleven boolean props. 14 files, 2.9 KB entry. About 320K installs, updated 2026-08-28.

When to use it: designing a shared component library or refactoring one that grew flags. The catch: in our crawl its frontmatter description is empty, which means the agent has less to match against and may not load it on its own. Invoke it by name when you need it.

npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y

What it does: the component-level details a design engineer sweats over: focus visibility, disabled and loading states, optical alignment, when a transition helps and when it is noise. React examples throughout. About 248K installs, 35K stars, updated 2026-08-21, 27 KB.

When to use it: any interactive component. The catch: 27 KB is a long file, and it overlaps with vercel-react-best-practices on nothing, so keep both; but do not add a third opinion on component polish on top.

npx skills add emilkowalski/skills@emil-design-eng -g -y

What it does: a correct guide to the ViewTransition component, addTransitionType and the CSS side of view transitions in React. About 113K installs, 9 files, 14.4 KB, updated 2026-08-28.

When to use it: page and list transitions in an App Router project. The catch: the API is still marked experimental in React, so pin your React version and reread the skill when you upgrade; an agent following last quarter's guidance can ship a deprecated call.

npx skills add vercel-labs/agent-skills@vercel-react-view-transitions -y

tailwind-design-system covers Tailwind v4 design tokens, component variants and responsive conventions in 5.3 KB. About 62K installs, updated 2026-09-01. Use it when starting a component library on Tailwind. The catch: it is a summary, not a spec; for shadcn projects the shadcn skill below is more specific.

nextjs-app-router-patterns is 3.7 KB on Server Components, streaming, parallel and intercepting routes and data fetching. About 29K installs. Use it when the agent keeps adding "use client" to everything. The catch: the description says Next.js 14+, and it does not mention the newer caching directives, so pair it with the Vercel skill rather than relying on it alone.

npx skills add wshobson/agents@nextjs-app-router-patterns -y

What it does: the official skill from the shadcn repository. It teaches the agent to add and search components with the CLI, fix broken installs, style with the token system and compose larger patterns like chat interfaces. About 43K installs, 123K stars, 15 files, 19.5 KB, updated 2026-09-03.

When to use it: any project on shadcn/ui. The catch: the install count is modest because the skill is recent, while the 123K stars belong to the whole library; judge it by the author, not the numbers. It also assumes the shadcn CLI is available in the project.

npx skills add shadcn-ui/ui@shadcn -y

What it does: a construction checklist for accessible, responsive interfaces: semantic HTML first, keyboard paths, layout that survives long text and small screens. About 33K installs, 92K stars, 10.7 KB, updated 2026-09-03.

When to use it: when accessibility is a requirement, not a nice-to-have. The catch: it is framework-neutral, so it will not tell you how to do any of this in React specifically; it sets the bar and the Vercel skills supply the mechanics.

npx skills add addyosmani/agent-skills@frontend-ui-engineering -g -y

vercel-react-native-skills (about 202K installs) is React Native, which deserves its own list. web-artifacts-builder from Anthropic (about 98K) builds claude.ai artifacts, not apps, and ships scripts. vercel-optimize (about 64K) has 156 files and scripts and needs a Vercel account to read metrics. minimalist-ui is a design preset our tagger caught on the word "grid". ask-sonner and animate from Emil's repository are good but narrow; they belong on the animation list.

Globally: vercel-react-best-practices, vercel-composition-patterns and emil-design-eng. Per project: shadcn if you use it, view-transitions if you animate routes, nextjs-app-router-patterns for a team new to the App Router. That is under 60 KB of instructions in total, and none of it loads until a request touches React.

npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y
npx skills add emilkowalski/skills@emil-design-eng -g -y