Framework
React agent skills for Claude Code, Codex and other agents.
- skills
- 1,654
- official
- 96
React skills, ranked
Ranked by score. Sort bymost stars,trending,newest,recently updated
| # | Skill | Repository | Stars | Used in | Tokens | Auto-check | Licence | Updated |
|---|---|---|---|---|---|---|---|---|
| 1 | Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file. | anthropics/ | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 | 2 days ago |
| 2 | Rules for structuring React components with composition instead of boolean props, covering compound components, lifted state, variants and React 19 changes. | vercel-labs/ | 1.7k | 58 repos | ~721 | Automated safety check: Pass | MIT | 7 mo ago |
| 3 | Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen. | google-labs-code/ | 8.4k | 6 repos | ~3.2k | Automated safety check: Notes | Apache-2.0 | 1 mo ago |
| 4 | Answer questions about the AI SDK and help build AI-powered features. | vercel-labs/ | 168 | 21 repos | ~1.2k | Automated safety check: Pass | No licence | 5 mo ago |
| 5 | Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. | sanity-io/ | 6.4k | 67 repos | ~1.2k | Automated safety check: Pass | MIT | today |
| 6 | Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation. | vercel-labs/ | 167 | 10 repos | ~3.1k | Automated safety check: Pass | MIT | 8 days ago |
| 7 | React and Next.js performance optimization guidelines from Vercel Engineering. | sanity-io/ | 6.4k | 130 repos | ~1.6k | Automated safety check: Pass | MIT | today |
| 8 | Fix newly added optional parameters, optional React props, and optional type/interface members in Remotion monorepo diffs by converting internal APIs to required nullable values and updating call… | remotion-dev/ | 62k | — | ~1k | Automated safety check: Pass | Unknown | today |
| 9 | React DevTools CLI for AI agents. An agent skill from sanity-io/sanity. | sanity-io/ | 6.4k | 3 repos | ~2.1k | Automated safety check: Pass | MIT | today |
| 10 | Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling | vercel-labs/ | 1.7k | 18 repos | ~1k | Automated safety check: Pass | No licence | 7 mo ago |
| 11 | A skill your agent uses when researching React APIs or concepts for documentation. | reactjs/ | 164 | 2 repos | ~2.7k | Automated safety check: Pass | CC-BY-4.0 | 2 days ago |
| 12 | Detects and fixes accessibility issues in React/Fluent UI webviews. | microsoft/ | 200 | — | ~3.2k | Automated safety check: Pass | MIT | today |
| 13 | Builds podcast-style audio narration from text with Azure OpenAI's GPT Realtime Mini over WebSocket, from a Python FastAPI backend to a React player. | microsoft/ | 3.1k | 1 repo | ~947 | Automated safety check: Pass | MIT | today |
| 14 | Apply pull-request review comments to the frontend of kotlinlang.org (Next.js, React, TypeScript, CSS Modules under blocks/, components/, pages/, hooks/, utils/, test/). | JetBrains/ | 1.6k | — | ~444 | Automated safety check: Pass | Apache-2.0 | yesterday |
| 15 | Verify PR readiness before requesting review or merging. An agent skill from Azure/LogicAppsUX. | Azure/ | 114 | — | ~2.4k | Automated safety check: Pass | MIT | today |
| 16 | How PostHog "canvas" dashboards work end-to-end — the two rendering tiers (json-render vs freeform React-in-iframe), the agent system prompts that steer each, and the RIGHT way to fetch PostHog data… | PostHog/ | 179 | — | ~2.2k | Automated safety check: Pass | MIT | 2 mo ago |
| 17 | React/Redux frontend development patterns for RedisInsight UI: component folder structure, styled-components, hooks, named exports, barrel files, layout components, and theme usage. | redis/ | 8.9k | — | ~3.2k | Automated safety check: Pass | Unknown | 2 days ago |
| 18 | Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. | microsoft/ | 3.1k | 5 repos | ~3.6k | Automated safety check: Pass | MIT | today |
| 19 | A skill your agent uses when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC, or when modifying the RSC sandpack infrastructure. | reactjs/ | 164 | — | ~2.1k | Automated safety check: Pass | CC-BY-4.0 | 2 days ago |
| 20 | Migrates vibe-coded web applications to AWS. An agent skill from aws/agent-toolkit-for-aws. | aws/ | 2.8k | — | ~3.2k | Automated safety check: Pass | Apache-2.0 | today |
| 21 | Inspect and profile the React component tree of a running Storybook story through chrome-devtools-mcp (React DevTools over the Chrome DevTools Protocol, via react-devtools-cdt-mcp). | sanity-io/ | 176 | — | ~2k | Automated safety check: Pass | MIT | today |
| 22 | Internationalization conventions for the RedisInsight UI (i18next). | redis/ | 8.9k | — | ~2.5k | Automated safety check: Pass | Unknown | 2 days ago |
| 23 | INVOKE THIS SKILL when building, iterating on, copying, or sharing a LangSmith Custom App — a React/TypeScript UI that runs inside LangSmith and reads the LangSmith API. | langchain-ai/ | 159 | — | ~3.2k | Automated safety check: Pass | MIT | 4 days ago |
| 24 | A skill your agent uses when writing any React documentation. | reactjs/ | 164 | — | ~1.2k | Automated safety check: Pass | CC-BY-4.0 | 2 days ago |
| 25 | Build MCP servers for Copilot Chat using the OpenAI Apps SDK or MCP Apps SDK widget rendering support (any language). | microsoft/ | 1k | — | ~6.1k | Automated safety check: Notes | Unknown | today |
| 26 | Write tests using React Native Testing Library (RNTL) v13 and v14 (@testing-library/react-native). | callstackincubator/ | 1.7k | — | ~1.8k | Automated safety check: Pass | MIT | yesterday |
| 27 | Build LangChain agents with modern patterns. An agent skill from langchain-ai/skills-benchmarks. | langchain-ai/ | 118 | — | ~2.5k | Automated safety check: Pass | MIT | 15 days ago |
| 28 | A skill your agent uses when writing or editing files in src/content/blog/. | reactjs/ | 164 | — | ~4.2k | Automated safety check: Pass | CC-BY-4.0 | 2 days ago |
| 29 | Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. | sanity-io/ | 187 | 1 repo | ~1.1k | Automated safety check: Pass | MIT | 2 days ago |
| 30 | Fetch data in Sentry's frontend with TanStack Query and apiOptions. | getsentry/ | 45k | — | ~1.4k | Automated safety check: Pass | Unknown | today |
| 31 | Write and review React/TypeScript tests for Sentry's frontend using Jest and React Testing Library. | getsentry/ | 45k | — | ~2.2k | Automated safety check: Pass | Unknown | today |
| 32 | Capture and analyze Remotion Studio React render profiles through development-only WebMCP tools. | remotion-dev/ | 62k | — | ~786 | Automated safety check: Pass | Unknown | today |
| 33 | Review Sentry React and TypeScript changes for bug patterns drawn from real production issues. | getsentry/ | 45k | — | ~2.6k | Automated safety check: Notes | Unknown | today |
| 34 | Turns Stitch screens into a React, Vite and TypeScript dashboard with TanStack Query data fetching, DESIGN.md tokens as CSS variables and optional read-only Web3 data. | google-labs-code/ | 8.4k | — | ~914 | Automated safety check: Notes | Apache-2.0 | 1 mo ago |
| 35 | Create data-driven presentation slides using React, Vite, and Recharts with Sentry branding. | getsentry/ | 1k | — | ~2.3k | Automated safety check: Pass | Apache-2.0 | 4 days ago |
| 36 | A skill your agent uses when writing or editing files in src/content/learn/. | reactjs/ | 164 | — | ~1.8k | Automated safety check: Pass | CC-BY-4.0 | 2 days ago |
| 37 | Full Sentry SDK setup for React Router Framework mode. An agent skill from getsentry/sentry-for-ai. | getsentry/ | 268 | — | ~3.8k | Automated safety check: Notes | Apache-2.0 | today |
| 38 | Add a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, and release checklist updates. | remotion-dev/ | 62k | — | ~777 | Automated safety check: Notes | Unknown | today |
| 39 | Guidelines for upgrading Expo SDK versions and fixing dependency issues | expo/ | 2.7k | 9 repos | ~1.9k | Automated safety check: Pass | MIT | today |
| 40 | Edit the @posthog/quill design system locally and consume the change in this repo (posthog-code) before it is published to npm. | PostHog/ | 179 | — | ~1.1k | Automated safety check: Pass | MIT | 2 mo ago |
| 41 | A skill your agent uses when creating new React documentation pages or updating existing ones. | reactjs/ | 164 | — | ~1.6k | Automated safety check: Pass | CC-BY-4.0 | 2 days ago |
| 42 | Full Sentry SDK setup for React. An agent skill from getsentry/sentry-for-ai. | getsentry/ | 268 | — | ~4.8k | Automated safety check: Pass | Apache-2.0 | today |
| 43 | Build forms, validate data, and react to user input in Blazor. | dotnet/ | 5.6k | 1 repo | ~3.2k | Automated safety check: Pass | MIT | today |
| 44 | Share state between components that don't have a direct parent-child parameter relationship, using cascading values, scoped services with change events, or CascadingValueSource via DI. | dotnet/ | 5.6k | 1 repo | ~2.5k | Automated safety check: Pass | MIT | today |
| 45 | Upgrade the React Native fixture app to a new version. An agent skill from Shopify/flash-list. | Shopify/ | 7.2k | — | ~1.9k | Automated safety check: Pass | MIT | 6 days ago |
| 46 | Create React Flow node components with TypeScript types, handles, and Zustand integration. | microsoft/ | 3.1k | 6 repos | ~502 | Automated safety check: Pass | MIT | today |
| 47 | Design the UX of custom-code Databricks Apps (AppKit/React) data screens — KPI/overview pages, reports, charts, tables, and Genie/chat data assistants — mapped to concrete AppKit components. | databricks/ | 345 | — | ~1.7k | Automated safety check: Pass | Unknown | yesterday |
| 48 | A skill your agent uses for anything related to EAS Observe - adding expo-observe to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive and ObserveInteractiveMarker, the useObserve… | expo/ | 2.7k | — | ~1.4k | Automated safety check: Pass | MIT | today |
Questions, answered from the data.
What is the best React skill?
Web Artifacts Builder (official) from anthropics/skills ranks first of the 1,654 React skills listed here, with the highest score: its repository has 180k GitHub stars, 40 other GitHub owners carry a copy, its SKILL.md loads about 769 tokens and it passes the automated safety check with no findings. Next come React Composition Patterns and Stitch to Remotion Walkthrough Videos.
Is there an official React skill?
96 of the 1,654 React skills are official, published by the vendor's own GitHub organization: Web Artifacts Builder, React Composition Patterns, Stitch to Remotion Walkthrough Videos, AI SDK, Find Skills and 91 more.
How are these skills ranked?
By Skill Navigator score, which combines the GitHub stars of the skill's repository (shared across that repo's skills and discounted for large collections), how many other GitHub owners carry a copy of the skill, and automated SKILL.md quality checks, minus penalties for safety-check warnings and for each further skill from the same repository. Skills that fail the safety check are not listed.