What problem does it solve? React codebases accumulate inconsistent patterns: components mixing server and client logic, useEffect misuse, unnecessary re-renders, and ad-hoc state management. This Skill provides decision trees, pattern catalogs, and reference implementations so React work follows consistent, correct conventions. ## Core Features & Use Cases - Component Architecture Decisions: Decision trees for client vs server components, co-location, splitting large components, and choosing between props, compound components, render props, and polymorphic patterns. - Hooks & State Management Guidance: Rules and anti-patterns for every built-in hook, plus decision trees for choosing between useState, Zustand, TanStack Query, URL state, and React Hook Form. - Performance & Testing Patterns: Re-render cause tables, memoization strategies, virtualization, code splitting, and React Testing Library query-priority guidance. - Use Case: When building a data-driven dashboard page, use this Skill to structure the page as a thin orchestrator with a render-state discriminant switch, TanStack Query hooks with a query key factory, and accessible form components validated with Zod. ## Quick Start Use the react skill to refactor this component by extracting its data fetching into a TanStack Query custom hook and splitting its render states into separate components.
