react
React library for building user interfaces. Use when building web applications, creating components, managing state, handling side effects, or optimizing performance.
- Installs
- 188
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/hairyf/skills --skill react- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads react automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
React
The skill is based on React, generated at 2026-01-31.
React is a JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible.
Core References
| Topic | Description | Reference |
|---|---|---|
| useState | Hook for managing component state with direct updates | core-usestate |
| useEffect | Hook for synchronizing components with external systems | core-useeffect |
| useContext | Hook for reading and subscribing to context | core-usecontext |
| useRef | Hook for referencing values that don't trigger re-renders | core-useref |
| useReducer | Hook for managing complex state with a reducer function | core-usereducer |
| Suspense | Component for displaying fallback UI while content is loading | core-suspense |
| memo | Higher-order component for memoizing component renders | core-memo |
| createContext | API for creating context objects | core-createcontext |
| Fragment | Component for grouping elements without wrapper nodes | core-fragment |
| StrictMode | Component for enabling additional development checks | core-strictmode |
Features
Performance Optimization
| Topic | Description | Reference |
|---|---|---|
| useMemo | Hook for caching expensive calculations | features-usememo |
| useCallback | Hook for caching function definitions | features-usecallback |
| lazy | API for code splitting and lazy loading components | features-lazy |
| useTransition | Hook for non-blocking state updates | features-usetransition |
| useDeferredValue | Hook for deferring non-critical UI updates | features-usedeferredvalue |
| useLayoutEffect | Hook that fires synchronously before browser repaint | features-uselayouteffect |
| startTransition | API for marking non-blocking state updates | features-starttransition |
Advanced Hooks
| Topic | Description | Reference |
|---|---|---|
| useId | Hook for generating unique IDs for accessibility | features-useid |
| use | API for reading Promise and Context values | features-use |
| useActionState | Hook for managing form action state | features-useactionstate |
| useOptimistic | Hook for optimistic UI updates | features-useoptimistic |
| useInsertionEffect | Hook for CSS-in-JS libraries to inject styles | advanced-useinsertioneffect |
| useSyncExternalStore | Hook for subscribing to external stores | advanced-usesyncexternalstore |
| useImperativeHandle | Hook for customizing ref handles | advanced-useimperativehandle |
| useEffectEvent | Hook for extracting non-reactive logic from Effects | advanced-useeffectevent |
| useDebugValue | Hook for adding labels to custom hooks in DevTools | advanced-usedebugvalue |
React DOM APIs
| Topic | Description | Reference |
|---|---|---|
| createRoot | API for creating a root to render React components | react-dom-createroot |
| hydrateRoot | API for hydrating server-rendered HTML | react-dom-hydrateroot |
| createPortal | API for rendering children into different DOM nodes | react-dom-createportal |
| flushSync | API for forcing synchronous updates | react-dom-flushsync |
React Server Components
| Topic | Description | Reference |
|---|---|---|
| cache | API for caching function results in Server Components | rsc-cache |
Advanced Components
| Topic | Description | Reference |
|---|---|---|
| Profiler | Component for measuring rendering performance | advanced-profiler |
| Activity | Component for hiding and restoring UI state | features-activity |
Testing
| Topic | Description | Reference |
|---|---|---|
| act | Test helper for applying pending updates before assertions | testing-act |
Best Practices
| Topic | Description | Reference |
|---|---|---|
| Rules of Hooks | Fundamental rules for using React Hooks correctly | best-practices-rules-of-hooks |
| Component Purity | Rules for keeping React components and hooks pure | best-practices-purity |
Key Recommendations
- Use hooks at the top level - Never call hooks conditionally or in loops
- Keep components pure - Components should be idempotent and have no side effects during render
- Use useEffect for side effects - Synchronize with external systems using Effects
- Memoize expensive calculations - Use
useMemofor costly computations,useCallbackfor functions passed to memoized components - Code split with lazy - Use
lazyandSuspensefor route-based code splitting - Avoid premature optimization - Profile first, optimize only when needed
- Use React Compiler - Consider using React Compiler for automatic memoization
- Handle dependencies correctly - Always include all reactive values in Effect and memoization dependencies
FAQ
What does the react skill do?
React library for building user interfaces. Use when building web applications, creating components, managing state, handling side effects, or optimizing performance.
How do I install react?
Run npx skills add https://github.com/hairyf/skills --skill react in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react/ (personal) or .claude/skills/react/ (project).
Which AI agents can use react?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is react safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains react?
It is published by hairyf in hairyf/skills. It has 188 recorded installs.
More from hairyf/skills
tailwindcss
hairyf/skills
Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.
hairy-utils
hairyf/skills
Comprehensive skills for working with @hairy/utils core utilities
motion
hairyf/skills
Motion animation library for JavaScript, React and Vue. Use when creating animations, gestures, layout transitions, scroll-linked effects, or working with motion values and animation controls.
openapi-specification-v3.2
hairyf/skills
OpenAPI Specification 3.2 — write and interpret OpenAPI descriptions (OAD), paths, operations, parameters, request/response, schema (JSON Schema 2020-12), security, and extensions. Use when authoring or validating OpenAPI 3.2 documents.
next
hairyf/skills
Next.js framework for building React applications with App Router, Server Components, and optimized performance. Use when working with Next.js apps, routing, data fetching, caching, Server Actions, or building full-stack React applications.
react-use
hairyf/skills
Collection of essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
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 improvements.