Build React 19 components with composition, hooks, and async data handling.
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill react-vkirill
Please help me install this Agent Skill. Skill: react Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/react Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill react-vkirill
This skill prevents common React 19 mistakes by guiding you to use the right composition, hooks, state primitives, and performance approach for modern component development.
ref-as-prop APIs without forwardRef in new code.useActionState, useOptimistic, use(), Suspense, Error Boundaries, and derived-state rules that avoid effect-based derivation.memo/useMemo/useCallback, plus useTransition, useDeferredValue, and virtualization.Use the react skill to build a React 19 feature by asking: "Implement an optimistic todo list using useActionState and useOptimistic in React 19, with Suspense and an ErrorBoundary for loading failures."
High-intent search queries and answers about installing and using this skill.
In React 19, you can pass `ref` as a standard prop directly to function components without `forwardRef`. This simplifies component APIs and is the recommended pattern for building new compound and polymorphic components.
Use `useOptimistic` to immediately show expected state changes while `useActionState` manages the async form submission. This combination allows you to build UIs that feel responsive during server mutations.
Rely on the React Compiler for automatic memoization in most cases. Manually use `useMemo`, `useCallback`, or `useTransition` only when critical performance bottlenecks require fine-grained control over re-renders.
Use the `use()` hook to read promises directly inside components, wrapping them in Suspense boundaries to display fallback UI. Always pair this with Error Boundaries to catch and handle loading failures gracefully.
Choose Server Components for static content and direct data fetching to reduce client bundle size. Use Client Components only for interactive elements requiring state, effects, or browser APIs.
Deriving state during render is preferred over using `useEffect`. If state depends on props or other state, calculate it directly in the render body to prevent unnecessary re-renders and effect loops.
ScorpionConMateDefine React 19 patterns for .tsx components with the React Compiler.
moughamirOptimize React 19 components for concurrent-safe rendering and reduced re-renders.
maxritterReview HTML templates and React, Vue, or Svelte components for accessibility standards.
vallafedericoExplain SolidJS reactivity primitives including signals, effects, stores, and memos.