React skills

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

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

vercel-labs/openreview

Skill Claude CodeCodex ✓ vendor

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…

1.6k +53 5mo ago A 67 tokens

bklit-ui

74

bklit/bklit-ui

Skill Claude CodeCodex

Bklit UI charts and data visualization for any project using the @bklit shadcn registry. Install, compose, theme, and animate charts correctly. Triggers when working with @bklitui/ui/charts, @bklit components, data visualization, dashboards, or chart theming. Also invoke manually for chart tasks.

1.6k +14 1mo ago A 75 tokens original MIT

internet-development/www-sacred

Skill Claude CodeCodex

Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…

1.6k 11d ago A 84 tokens original MIT

internet-development/www-sacred

Skill Claude CodeCodex

Take a sacred React component (or a sacred screen that mirrors a Simulacrum CLI surface) and graft it into a foreign React codebase that already ships its own design system, build pipeline, and CSS toolchain — without breaking the host or polluting it with sacred-specific globals.

1.6k 11d ago A 0 tokens original MIT

live-codes/livecodes

Skill Claude CodeCodex

Use SDK with React, Vue, Svelte, Solid, Preact, and Web Components. sdkReady callback pattern, reactive props, and framework-specific setup. Load this skill when embedding LiveCodes in a framework application.

1.5k +2 5d ago A 51 tokens original MIT

beui-pro

78

starc007/ui-components

Skill Claude CodeCodex

Choose, inspect, install, and compose licensed beUI Pro premium React blocks from the authenticated shadcn registry. Use when building or improving landing pages with beUI Pro, installing @beui-pro items, selecting premium heroes, features, pricing, social proof, CTAs, navigation, footers, or other page sections, or…

1.4k 3d ago A 83 tokens original MIT

beui

79

starc007/ui-components

Skill Claude CodeCodex

Pick and install beUI (@beui) animated React components from the shadcn registry. Use when building motion UI, agent/chat interfaces, toasts, docks, bottom sheets, drawers, popovers, sliders, loaders, 404 pages, or any beui.dev component. Maps user intent to exact @beui install slugs instead of inventing custom…

1.4k 3d ago A 78 tokens original MIT

storybookjs/react-native

Skill Claude CodeCodex

Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a…

1.3k 1mo ago A 102 tokens original MIT

storybookjs/react-native

Skill Claude CodeCodex

Incrementally upgrade React Native Storybook across the supported migration paths. Use when upgrading @storybook/react-native projects from 5.3.x to 6.5.x, 6.5.x to 7.6.x, 7.6.x to 8.3.x, 8.x to 9.x, or 9.x to 10.x. Detect the currently installed Storybook version, choose only the next migration step, update…

1.3k 1mo ago A 151 tokens original MIT

storybookjs/react-native

Skill Claude CodeCodex

Create and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for…

1.3k 1mo ago A 83 tokens original MIT

goey-toast

83

anl331/goey-toast

Skill Claude CodeCodex

Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion. Use when adding toast/notification UI to a React app (success/error/warning/info/promise toasts), or when the user mentions goey-toast / gooey toast.

1.3k +11 2mo ago A 64 tokens original MIT

highcharts-react

84

highcharts/highcharts-react

Skill Claude CodeCodex

Use to implement, configure, and troubleshoot Highcharts in React projects. Trigger for Highcharts-related chart or data visualization work — when in doubt, use this skill if Highcharts is a candidate.

1.2k 6d ago A 43 tokens

no-useEffect

85

canwhite/Krebs

Skill Claude CodeCodex

A React coding guideline that avoids direct use of useEffect, a feature for responding to changes in data or the page. It recommends other patterns instead.

1.1k 5d ago A 25 tokens

create-component

86

daangn/seed-design

Skill Claude CodeCodex

End-to-end SEED component implementation guide for React Web, Lynx, and cross-platform work. Use when adding or changing components across rootage, qvism, react/lynx packages, registry snippets, docs, examples, or when writing/refactoring docs/stories Storybook files. Story-only work follows a CSF Next fast path…

1.1k 2d ago A 88 tokens original Apache-2.0

seed-design

87

daangn/seed-design

Skill Claude CodeCodex

An integration guide for SEED Design, covering shared component specifications and foundations plus React and Lynx implementation guidance.

1.1k 2d ago A 140 tokens original Apache-2.0

react-useeffect

88

jarrodwatts/claude-code-config

Skill Claude CodeCodex

React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.

1.1k 7mo ago A 46 tokens

jarrodwatts/claude-code-config

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…

1.1k 7mo ago A 67 tokens

react

90

openops-cloud/openops

Skill Claude CodeCodex

Use when creating or editing frontend React code in react-ui or ui-components packages. Triggers on any frontend component, hook, or UI work.

1.1k 4d ago A 31 tokens

lytenyte-grid

91

1771-Technologies/lytenyte

Skill Claude CodeCodex

Use this skill when the user is working with LyteNyte Grid (@1771technologies/lytenyte-pro or @1771technologies/lytenyte-core), a headless React data grid. Activate for tasks like: installing or licensing LyteNyte Grid, configuring columns or rows, building cell renderers or editors, adding filters or sort controls…

1.0k 18d ago A 257 tokens

cali

92

callstackincubator/cali

Skill Claude CodeCodex

Use when working in the Cali repository or when you need to run, extend, or debug the Cali CLI for mobile React Native and Expo workflows. Covers Cali commands (qa, review, perf-review, dev), the shared cali-context.json contract, local mode selection, required local CLIs, provider setup, and CI integration patterns.

990 2mo ago A 76 tokens original MIT

tanstack-start

93

jezweb/claude-skills

Skill Claude CodeCodex

Build a full-stack TanStack Start app on Cloudflare Workers from scratch — SSR, file-based routing, server functions, D1+Drizzle, better-auth, Tailwind v4+shadcn/ui. Use whenever the user mentions TanStack Start, asks to scaffold a full-stack Cloudflare app with SSR, wants an SSR dashboard, or asks for a React 19 +…

987 +5 2mo ago A 115 tokens original MIT

react-doctor

94

darkroomengineering/satus

Skill Claude CodeCodex

Use when finishing a feature, fixing a bug, before committing React code, or when the user types /doctor, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.

982 +2 4d ago A 70 tokens copy · 91% MIT

forcedotcom/sf-skills

Skill Claude CodeCodex

MUST activate when the user wants to build, create, or generate a React application, React app, web application, single-page application (SPA), or frontend application — even if no project files exist yet. MUST also activate when the project contains a uiBundles//src/ directory or sfdx-project.json and the prompt says…

952 +6 4d ago A 170 tokens original Apache-2.0