What are the best Claude Code skills for React and Next.js?
scaffold-nextjs from mblode/agent-skills is the highest-scoring Claude Code skill for React and Next.js, at 89/100 (grade B) on the Suede Skill Check. The table below compares the top 15 of 40 listed React skills from 9 repositories by score, publisher and license, using the October 22, 2026 snapshot of SuedeAI.directory.
- 40 listed React skills
- 10 full pages scoring 80+
- 15 repositories
Compare 15 Claude Code skills for React and Next.js
Ranked by Suede Skill Check score. Linked names open the directory listing; scores come from the published rubric.
| Skill | Publisher | Suede Skill Check | License | What it does |
|---|---|---|---|---|
| scaffold-nextjs | mblode mblode/agent-skills | 89/100 · B | MIT | Scaffolds a Next.js turborepo with Blode UI, icons, Ultracite (oxlint/shadcn), workspace hooks, and GitHub/Vercel setup. Use when asked to "create a… |
| web-artifacts-builder | Anthropic Official anthropics/skills | 87/100 · B | Apache-2.0 | 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. |
| nextjs-developer | jeffallan jeffallan/claude-skills | 84/100 · B | MIT | Guides building Next.js 14+ applications with App Router, server components, and server actions, including route handlers, middleware, streaming SSR, metadata, and Vercel deployment. |
| react-expert | jeffallan jeffallan/claude-skills | 84/100 · B | MIT | Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components… |
| react-native-expert | jeffallan jeffallan/claude-skills | 84/100 · B | MIT | Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks… |
| ui-design | mblode mblode/agent-skills | 84/100 · B | MIT | Designs and builds React, Next, and Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data. |
| detox-skill | LambdaTest Official LambdaTest/agent-skills | 84/100 · B | MIT | Generates Detox end-to-end tests in JavaScript for React Native apps, running on local simulators and emulators or the TestMu AI cloud. |
| apollo-client | Apollo GraphQL Official apollographql/skills | 84/100 · B | MIT | 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. |
| react-email | Resend Official resend/resend-skills | 83/100 · B | MIT | Guides building HTML email templates with React components, rendering them to HTML, adding the visual email editor, and sending with Resend. |
| expo-brownfield | Expo Official expo/skills | 83/100 · B | MIT | Integrates Expo and React Native into an existing native iOS or Android app, including embedding screens in SwiftUI, UIKit, or Kotlin. |
| expo-data-fetching | Expo Official expo/skills | 83/100 · B | MIT | 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 | Expo Official expo/skills | 83/100 · B | MIT | Migrates a web React app to native iOS and Android with Expo, including how web idioms like the DOM and CSS map to native. |
| markstream-install | GitHub Official github/awesome-copilot | 82/100 · B | MIT | Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications. Use for package… |
| emblem-ai | EmblemCompany EmblemCompany/Agent-skills | 81/100 · B | MIT | 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. |
| gsap-framer-scroll-animation | GitHub Official github/awesome-copilot | 81/100 · B | MIT | Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal… |
Questions and answers
Which React skill has the highest Suede Skill Check score?
scaffold-nextjs from mblode/agent-skills scores 89/100, grade B, the highest of the 40 listed React skills in the October 22, 2026 snapshot. It earns full points for structural checks, recent maintenance and instruction depth. web-artifacts-builder from anthropics/skills follows at 87/100.
How do I install a React skill in Claude Code?
Run npx skills add with the skill folder's GitHub URL from your project, or copy the folder into .claude/skills/ and Claude Code loads it when a request matches its description. For scaffold-nextjs, run: npx skills add https://github.com/mblode/agent-skills/tree/main/skills/scaffold-nextjs. Each full skill page on SuedeAI.directory lists the same steps for Claude Code and Codex.
Are these React skills free?
All 15 React skills on this page are published in public GitHub repositories and cost nothing to download. Every one uses an open-source or open-content license, led by MIT (14) and Apache-2.0 (1), so you can use and adapt the files at no cost under those terms. 2 skills name credentials for an outside service; each full page lists them under Before you install.
Do these React skills work with Codex and Cursor?
Yes. Each of the 15 React skills on this page is a SKILL.md folder in the Agent Skills format, which Claude Code, Codex and Cursor all read. The skills CLI (npx skills add) installs every one of them into Claude Code, Codex, Cursor and other agents, and each full skill page adds a project-level copy into .claude/skills for Claude Code and .agents/skills for Codex. 4 of them declare compatibility in the SKILL.md frontmatter.
How does SuedeAI.directory rank React skills?
By Suede Skill Check score from 0 to 99, which adds structure, description quality, instruction depth, bundled files, maintenance and curated-list citations, all read from each skill's published files. A skill joins this page when its name or summary matches the React and Next.js keyword map; each repository fills at most three rows, so the table compares publishers.
Which React skills come from official publishers?
web-artifacts-builder from Anthropic, detox-skill from LambdaTest, apollo-client from Apollo GraphQL, react-email from Resend, expo-brownfield, expo-data-fetching and expo-web-to-native from Expo and markstream-install and gsap-framer-scroll-animation from GitHub are published by the company behind the tool, marked Official in the table.
Compare alternatives
More Claude Code skills by task
Presentations · Playwright and Browser Testing · Terraform · SEO · Code Review · Git and Pull Requests · MCP Servers · Data Analysis · Kubernetes · AWS · Security Audits · Email · Video · iOS and Swift · Flutter and Dart · RAG and Vector Search · LLM Evals · SQL and Databases · Technical Documentation · UI Design
Browse by category: Developer Tools and Frameworks · Frontend and Design · Testing and QA.