--- title: "Skills for React · skilld" canonical_url: "https://skilld.dev/frameworks/react" last_updated: "2026-08-20T06:40:32.964Z" meta: description: "Browse 200 React agent skills from 8+ maintainers. Every result links to source." "og:description": "Agent skills for React components, hooks, state management, and current patterns." "og:title": "Skills for React" --- ` # Skills for React Agent skills for React components, hooks, state management, and current patterns. Every result links to its SKILL.md source. [react.dev](https://react.dev) [All skills](https://skilld.dev/skills) ## **React skills ** Showing 24 of 200 - [ **/coding-standards**![affaan-m](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Faffaan-m.png%3Fsize%3D40) Affaan Mustafa · affaan-m/everything-claude-code 270k Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns. Use when reviewing code quality or naming with no framework-specific skill that applies.](https://skilld.dev/gh/affaan-m/everything-claude-code/coding-standards) - [ **/frontend-patterns**![affaan-m](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Faffaan-m.png%3Fsize%3D40) Affaan Mustafa · affaan-m/everything-claude-code 270k Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.](https://skilld.dev/gh/affaan-m/everything-claude-code/frontend-patterns) - [ **/project-guidelines-example**![affaan-m](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Faffaan-m.png%3Fsize%3D40) Affaan Mustafa · affaan-m/everything-claude-code 270k Project-specific skill template covering architecture, patterns, testing, and deployment guidance.](https://skilld.dev/gh/affaan-m/everything-claude-code/project-guidelines-example) - [ **/compiler-commit**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits with the \[compiler\] or \[rust-compiler\] prefix.](https://skilld.dev/gh/facebook/react/compiler-commit) - [ **/compiler-orchestrator**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Orchestrate the Rust compiler port end-to-end. Discovers the current frontier, fixes failing passes, ports new passes, reviews, and commits in a loop.](https://skilld.dev/gh/facebook/react/compiler-orchestrator) - [ **/compiler-port**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Port a compiler pass from TypeScript to Rust. Gathers context, plans the port, implements in a subagent with test-fix loop, then reviews.](https://skilld.dev/gh/facebook/react/compiler-port) - [ **/compiler-review**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Review Rust port code for port fidelity, convention compliance, and error handling. Compares against the original TypeScript source.](https://skilld.dev/gh/facebook/react/compiler-review) - [ **/compiler-verify**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Use when you need to run all compiler checks (tests, lint, format) before committing. Detects whether TS or Rust code changed and runs the appropriate checks.](https://skilld.dev/gh/facebook/react/compiler-verify) - [ **/extract-errors**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Use when adding new error messages to React, or seeing "unknown error code" warnings.](https://skilld.dev/gh/facebook/react/extract-errors) - [ **/feature-flags**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.](https://skilld.dev/gh/facebook/react/feature-flags) - [ **/fix**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.](https://skilld.dev/gh/facebook/react/fix) - [ **/flags**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.](https://skilld.dev/gh/facebook/react/flags) - [ **/flow**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Use when you need to run Flow type checking, or when seeing Flow type errors in React code.](https://skilld.dev/gh/facebook/react/flow) - [ **/plan-update**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Use when you need to update a plan document with deep research across all compiler passes. Launches parallel subagents to analyze how a topic affects every compiler phase, then consolidates findings into the plan doc.](https://skilld.dev/gh/facebook/react/plan-update) - [ **/rust-port-status**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Show the status of all Rust port plan documents and recent related commits. Use when you need to understand what's been done vs what remains.](https://skilld.dev/gh/facebook/react/rust-port-status) - [ **/test**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Use when you need to run tests for React core. Supports source, www, stable, and experimental channels.](https://skilld.dev/gh/facebook/react/test) - [ **/verify**![facebook](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Ffacebook.png%3Fsize%3D40) Meta · facebook/react 251k Use when you want to validate changes before committing, or when you need to check all React contribution requirements.](https://skilld.dev/gh/facebook/react/verify) - [ **/web-artifacts-builder**![anthropics](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fanthropics.png%3Fsize%3D40) Anthropic · anthropics/skills 179k Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.](https://skilld.dev/gh/anthropics/skills/web-artifacts-builder) - [ **/frontend-code-review**![langgenius](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Flanggenius.png%3Fsize%3D40) langgenius/dify 158k Use only when the user explicitly requests a review or audit of frontend code under \`web/\` or \`packages/dify-ui/\`. Supports pending-change, file-focused, and pasted-diff reviews. Do not use for implementation-only requests, diagnosis without review intent, or backend-only code.](https://skilld.dev/gh/langgenius/dify/frontend-code-review) - [ **/react-sync**![vercel](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fvercel.png%3Fsize%3D40) vercel/next.js 143k Build local React changes in the bundle variants consumed by Next.js, sync them into a local Next.js checkout, and test the resulting integration. Use when working on React changes that need validation in Next.js, or when asked to run buildForNext, pnpm sync-react, or synchronize a React checkout with Next.js.](https://skilld.dev/gh/vercel/next.js/react-sync) - [ **/react-vendoring**![vercel](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fvercel.png%3Fsize%3D40) vercel/next.js 143k React vendoring and react-server layer boundaries. Use when editing entry-base.ts, $$compiled.internal.d.ts, compiled/react\* packages, or taskfile.js copy\_vendor\_react. Covers the entry-base.ts boundary (all react-server-dom-webpack/\* imports must go through it), vendored React channels, type declarations, Turbopack remap to react-server-dom-turbopack, ComponentMod access patterns, and ESLint suppression for guarded requires.](https://skilld.dev/gh/vercel/next.js/react-vendoring) - [ **/ui-ux-pro-max**![nextlevelbuilder](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fnextlevelbuilder.png%3Fsize%3D40) Next Level Builder · nextlevelbuilder/ui-ux-pro-max-skill 132k UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.](https://skilld.dev/gh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max) - [ **/shadcn**![shadcn](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fshadcn.png%3Fsize%3D40) shadcn/ui 125k Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".](https://skilld.dev/gh/shadcn/ui) - [ **/frontend-ui-engineering**![addyosmani](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Faddyosmani.png%3Fsize%3D40) Addy Osmani · addyosmani/agent-skills 100k Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.](https://skilld.dev/gh/addyosmani/agent-skills/frontend-ui-engineering) ## Often appears with - TypeScript 75 Checked GitHub 1 hour ago