React skills

2,337 tagged React, measured the same way as everything else here.

Browse within: nextjs 114javascript 42accessibility 35design-system 29agentic-workflow 27codex-skills 27components 27ui 26openai 24claude-code-skills 23expo 22motion 22react-native 22reactjs 21

aiskillstore/marketplace

Skill Claude CodeCodex

Development guidelines for building front ends with Next.js 15, React 19, TypeScript, Shadcn/ui, and Tailwind CSS. They cover how pages, components, data fetching, routes, and project files should be organised.

416 2d ago A 116 tokens

better-forms

122

Asymmetric-al/core

Skill Claude CodeCodex

Complete guide for building accessible, high-UX forms in modern stacks (React/Next.js, Tailwind, Zod). Includes specific patterns for clickable areas, range sliders, output-inspired design, and WCAG compliance.

392 4d ago A 48 tokens AGPL-3.0

aidd-react

123

paralleldrive/aidd

Skill Claude CodeCodex

Enforces React component authoring best practices. Use when creating React components, binding components, presentations, useObservableValues, or when the user asks about React UI patterns, reactive binding, or action callbacks.

380 +1 2mo ago A 45 tokens original MIT

OpenSource03/harnss

Skill Claude CodeCodex

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…

362 +2 23d ago A 67 tokens copy · 84% MIT

Singtaa/OneJS

Skill Claude CodeCodex

Use this skill whenever the user wants to build or set up user interface in a Unity project using OneJS, React, TypeScript, or JSX, e.g. 'add a main menu to my game', 'build a settings screen', 'make a HUD', 'set up OneJS', 'my OneJS panel is blank', 'the UI is not hot reloading'. Covers confirming OneJS is installed…

347 3d ago A 199 tokens original MIT

react-best-practices

126

AvivK5498/The-Claude-Protocol

Skill Claude CodeCodex

React and Next.js performance optimization patterns. Use BEFORE implementing any React code to ensure best practices are followed.

346 +1 6mo ago A 27 tokens original MIT

component-refactoring

127

Charlie85270/Dorothy

Skill Claude CodeCodex

Refactor high-complexity React components in Dify frontend. Use when pnpm analyze-component --json shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when pnpm analyze-component warns to refactor before testing; avoid for simple/well-structured…

341 1mo ago A 93 tokens copy · 100% MIT

Charlie85270/Dorothy

Skill Claude CodeCodex

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…

341 1mo ago A 67 tokens copy · 78% MIT

gsap-animation

129

notedit/happy-skills

Skill Claude CodeCodex

GSAP + Remotion integration for professional motion graphics video production. Timeline orchestration, text splitting, SVG morphing, advanced easing, and reusable effect presets.

340 6mo ago A 36 tokens original MIT

laraowl/laraowl

Skill Claude CodeCodex

Develops Inertia.js v3 React client-side applications. Activates when creating React pages, forms, or navigation; using , , useForm, useHttp, setLayoutProps, or router; working with deferred props, prefetching, optimistic updates, instant visits, or polling; or when user mentions React with Inertia, React pages, React…

338 +1 3d ago C 86 tokens original Apache-2.0

termcast

131

remorses/termcast

Skill Claude CodeCodex

Build TUIs with a Raycast-like React API using termcast. Implements @raycast/api components (List, Detail, Form, Action) rendered to the terminal via opentui.

337 21d ago A 40 tokens original MIT

pdsuwwz/nextjs-nextra-starter

Skill Claude CodeCodex

A project guide for a Next.js documentation and landing-page starter built with Nextra, Tailwind CSS, MDX, translations, themes, and interface components. It explains the repository’s structure, existing features, extension points, and migration patterns.

311 2mo ago A 97 tokens original MIT

pdsuwwz/nextjs-nextra-starter

Skill Claude CodeCodex

Distill and apply this repository's Next.js Nextra starter architecture, implemented features, extension points, and migration patterns. Use when Codex needs to understand this project, continue second-stage development, add or change docs/landing/i18n/theme/auth/UI behavior, or reuse these Next.js 16 + Nextra 4 +…

311 2mo ago A 85 tokens original MIT

component-refactoring

134

PageAI-Pro/ralph-loop

Skill Claude CodeCodex

Refactor high-complexity React components in frontend. Use when the user asks for code splitting, hook extraction, or complexity reduction, or when you come across a component that is too complex to understand and refactor it.

294 2mo ago A 49 tokens original MIT

frontend-testing

135

PageAI-Pro/ralph-loop

Skill Claude CodeCodex

Generate Vitest + React Testing Library tests for frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.

294 2mo ago A 48 tokens original MIT

InBrowserApp/InBrowserApp

Skill Claude CodeCodex

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…

292 +1 24d ago A 67 tokens

motion

137

theexperiencecompany/gaia

Skill Claude CodeCodex

Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind…

285 2d ago A 89 tokens

animate

138

OneWave-AI/claude-skills

Skill Claude CodeCodex

Generate animated videos and motion graphics from natural language descriptions. Creates a standalone Vite + React project with Framer Motion scenes that auto-play in the browser. Use when the user wants to create animations, motion graphics, video intros, animated presentations, or product demos.

282 +1 22d ago A 55 tokens original MIT

hylarucoder/hai-stack

Skill Claude CodeCodex

Produces a structured diagnosis report on one React component's design: a 7-dimension scorecard (consumer API, data flow, testability, extensibility, performance, mental model, boundaries & contracts — each scored 1-5 with code evidence), design highlights, and P0/P1/P2 recommendations with effort estimates, every…

282 +1 2mo ago A 223 tokens

bidah/skill-set

Skill Claude CodeCodex

Build an App Store "Today"-style card that zooms into its own detail/article screen with expo-router's Link.AppleZoom, including the poster card UI (expo-image + blurhash placeholder, caption tinted with the image's own average colour) and the editorial destination screen. Use when adding a card-to-detail zoom…

274 1mo ago A 107 tokens

bidah/skill-set

Skill Claude CodeCodex

Implement frame-perfect, native-feeling keyboard handling in React Native and Expo apps. Use when content is covered by the keyboard, when keyboard animations jank or "snap" on Android, when inputs are hidden behind the keyboard, when the keyboard covers fields on Android 15 / edge-to-edge even though older Android…

274 1mo ago A 137 tokens

frontend

142

speakeasy-api/gram

Skill Claude CodeCodex

Rules and best practices when working on the dashboard React frontend codebase (including the inlined Gram Elements code).

267 3d ago A 24 tokens AGPL-3.0

project-form-patterns

143

AkaraChen/aghub

Skill Claude CodeCodex

Form implementation guidance for the aghub desktop app. Use when building or refactoring forms in crates/desktop/src, especially HeroUI v3 + React forms, RHF integration, validation, custom editors, and error presentation. Triggers: MCP forms, settings dialogs, create/edit panels, TextField, FieldError, Select…

264 2d ago A 88 tokens original MIT

perfect-web-clone

144

ericshang98/Perfect-Web-Clone

Skill Claude CodeCodex

Reproduce a live website from its URL as a clean, deployable Vite + React project by running the complete agent-driven Perfect Web Clone harness: capture source evidence, plan the full page, author every section, implement common interactions, build, compare, repair, and hand the measured result to the user for…

262 +2 11d ago A 134 tokens original MIT