What problem does it solve? Writing and reviewing React code often leads to inconsistent patterns: derived state stored in useEffect, misplaced state, missing Suspense boundaries, and inaccessible markup. This Skill provides a decision framework and idiomatic patterns for React 18/19 so components are correct, performant, and accessible by default. ## Core Features & Use Cases - Hooks Discipline & State Decisions: Enforces top-level hooks, cleanup, functional updaters, and a decision tree for choosing between useState, lifted state, Context, external stores, and server-state libraries like TanStack Query. - Server/Client Component Boundaries: Guides RSC composition, React 19 form actions with useActionState, useOptimistic updates, and Suspense plus error boundary placement. - Accessibility-First Composition: Requires semantic HTML, keyboard reachability, labeled inputs, and focus management in every component. - Use Case: When reviewing a TSX pull request, apply the state location decision tree and data fetching matrix to flag useEffect-based fetching and recommend TanStack Query or RSC fetch instead. ## Quick Start Review this React component and rewrite it following the react-patterns rules for hooks, state placement, and data fetching.
