React and Next.js skills for Claude Code and Codex
Skills for React and Next.js work: App Router and server components, composition patterns, React 18 and 19 migrations, view transitions and performance rules from Vercel. They keep an agent on current React APIs instead of patterns from older tutorials.
Highest-scoring React and Next.js skills in the October 22, 2026 snapshot: web-artifacts-builder from anthropics/skills (87/100), nextjs-developer from jeffallan/claude-skills (84/100) and ui-design from mblode/agent-skills (84/100). Scores come from the Suede Skill Check.
- 30 listed skills
- 12 repositories
- 11 with full pages
23 from official publishers. 1 bundle scripts. 2 connect to an outside service. Listed in Developer Tools and Frameworks (13), Frontend and Design (12), Testing and QA (3), DevOps and Cloud (1), Code Review and Code Quality (1).
All 30 React and Next.js skills
No matching skills. Try fewer words or clear your search.
| Skill | Repository | What it does |
|---|---|---|
| apollo-client 84/100 · B | apollographql/skills | Guides building React applications with Apollo Client 4.x, including setup, GraphQL queries and mutations with hooks, caching, local state with reactive variables, and troubleshooting. |
| building-blog 77/100 · C | BuildShipGrowRepeat/nextjs-sanity-blog-skill | Guides adding an SEO-optimized blog to a Next.js and Sanity site, including building the blog section from scratch and integrating Sanity CMS. |
| emblem-ai 81/100 · B | EmblemCompany/Agent-skills | Adds user management with multi-chain wallet authentication, AI assistant chat surfaces, and observability to apps, using React components, TypeScript SDKs, and session-based authentication. |
| emblem-ai-react 78/100 · C | EmblemCompany/Agent-skills | Adds website authentication and wallet-enabled users to a React app using EmblemAuthProvider, ConnectButton, social, email, and wallet login, chat components, and React auth hooks. |
| expo-data-fetching 83/100 · B | expo/skills | Guides implementing and debugging network requests and data fetching using fetch, React Query, SWR, caching, offline support, and Expo Router data loaders. |
| expo-web-to-native 83/100 · B | expo/skills | Migrates a web React app to native iOS and Android with Expo, including how web idioms like the DOM and CSS map to native. |
| nextjs-developer 84/100 · B | jeffallan/claude-skills | Guides building Next.js 14+ applications with App Router, server components, and server actions, including route handlers, middleware, streaming SSR, metadata, and Vercel deployment. |
| nextjs-on-cloudflare 72/100 · C | cloudflare/skills | Builds, migrates, and deploys Next.js apps on Cloudflare Workers with vinext, including choosing between vinext and OpenNext and moving existing apps to Workers. |
| react-email 83/100 · B | resend/resend-skills | Guides building HTML email templates with React components, rendering them to HTML, adding the visual email editor, and sending with Resend. |
| ui-design 84/100 · B | mblode/agent-skills | Designs and builds React, Next, and Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data. |
| web-artifacts-builder 87/100 · B | anthropics/skills | Builds elaborate multi-component claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui, for complex artifacts needing state management, routing, or shadcn/ui components. |
| gsap-framer-scroll-animation 81/100 · B | github/awesome-copilot | Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal… |
| next-intl-add-language 58/100 · D | github/awesome-copilot | Add new language to a Next.js + next-intl application |
| react-audit-grep-patterns 72/100 · C | github/awesome-copilot | Provides the complete, verified grep scan command library for auditing React codebases before a React 18.3.1 or React 19 upgrade. Use this skill… |
| react-container-presentation-component 77/100 · C | github/awesome-copilot | Create a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then… |
| react-expert 84/100 · B | jeffallan/claude-skills | Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components… |
| react-vite-dashboard 66/100 · D | google-labs-code/stitch-skills | Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns… |
| react18-batching-patterns 77/100 · C | github/awesome-copilot | Provides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. Use this skill whenever a class… |
| react18-dep-compatibility 68/100 · D | github/awesome-copilot | React 18.3.1 and React 19 dependency compatibility matrix. |
| react18-enzyme-to-rtl 77/100 · C | github/awesome-copilot | Provides exact Enzyme → React Testing Library migration patterns for React 18 upgrades. Use this skill whenever Enzyme tests need to be rewritten… |
| react18-legacy-context 75/100 · C | github/awesome-copilot | Provides the complete migration pattern for React legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext… |
| react18-lifecycle-patterns 75/100 · C | github/awesome-copilot | Provides exact before/after migration patterns for the three unsafe class component lifecycle methods - componentWillMount… |
| react18-string-refs 77/100 · C | github/awesome-copilot | Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill… |
| react19-concurrent-patterns 69/100 · D | github/awesome-copilot | Preserve React 18 concurrent patterns and adopt React 19 APIs (useTransition, useDeferredValue, Suspense, use(), useOptimistic, Actions) during… |
| react19-source-patterns 64/100 · D | github/awesome-copilot | Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates. |
| react19-test-patterns 66/100 · D | github/awesome-copilot | Provides before/after patterns for migrating test files to React 19 compatibility, including act() imports, Simulate removal, and StrictMode call… |
| scaffold-nextjs 89/100 · B | mblode/agent-skills | Scaffolds a Next.js turborepo with Blode UI, icons, Ultracite (oxlint/shadcn), workspace hooks, and GitHub/Vercel setup. Use when asked to "create a… |
| vercel-composition-patterns 64/100 · D | vercel-labs/agent-skills | React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or… |
| vercel-react-best-practices 67/100 · D | vercel-labs/agent-skills | React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring… |
| vercel-react-view-transitions 68/100 · D | vercel-labs/agent-skills | Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and… |
How to choose React and Next.js skills
Check the React version each skill targets. The React 18 and 19 migration skills are written as before-and-after patterns for that upgrade, while best-practice skills assume a current release.
For Next.js, prefer skills written for the App Router if that is what you run; several cover server components and server actions directly.
Vercel's React skills are guidelines in Markdown and quick to adopt. Skills that deploy, such as Next.js on Cloudflare, need that platform's CLI and credentials.
Ranked React and Next.js shortlists
Related topics
Expo and React Native 29Test Automation 134Android and Kotlin 16App Builders 15Authentication and Login 16Cloudflare 20CMS, Sanity and WordPress 13Dependency Management 23
Find your next useful skill
Explore Rising Skills with quality scores and source reports, or search from inside your agent.
Get Rising Skills by email · Read Rising Skills · Install the finder · State of Agent Skills