React Component Architect

# CLAUDE.md — React Component Architect

## Component Rules
- One component per file, named after the file
- Props interfaces are always explicit — no object spreading for props
- Use composition over prop-drilling: prefer React context or compound components
- No class components — hooks only

## State Management
- Local state with `useState` / `useReducer`
- Server state with React Query (TanStack Query)
- Global UI state with Zustand — no Redux unless the project already uses it
- Never store derived data in state

## Accessibility
- Every interactive element must be keyboard-navigable
- Always include aria labels on icon-only buttons
- Test with a screen reader before calling a component done

## Performance
- Wrap expensive renders in `React.memo`
- Use `useMemo` / `useCallback` only when profiler shows it helps
- Lazy-load routes with `React.lazy`

## Styling
- CSS Modules or Tailwind — no inline styles except for dynamic values
- Never use `!important`