1---2name: react-development3description: Builds React apps with container/view split, typed props, URL state, and data-fetching boundaries that stay testable. Use this skill when implementing or refactoring React features, hooks, or component architecture. Do not use when/for Storybook journey authoring alone (use storybook-journeys) or pure visual design tokens (use ui-design-principles).4---56# React Development78## Critical rules910- Frameworks are adapters, not architectures — business logic and Views stay portable.11- No `any`, no `as`. No framework imports in `components/`, `hooks/`, `lib/`, or `queries/`.12- Container orchestrates data; View is prop-driven and framework-free.13- Use DI `handlers` (user actions) and optional `deps` (platform capabilities) — never routers in Views.14- Handle loading, error, empty, and offline. Accessibility is required (WCAG 2.1 AA baseline).15- Test what pays: domain logic and critical flows, not snapshots.16- Before Container/View examples, patterns, interactions, or Storybook setup, read the matching resource below.1718## Workflow19201. Split presentation from framework: View props + handlers; Container owns router/query.212. Before choosing state mechanisms or Query/URL/form patterns, read [references/patterns.md](references/patterns.md).223. Choose the simplest state fit: React Query (server), URL/nuqs (shareable UI), `useState`/`useReducer` (local), Context (feature subtree), Zustand only after measuring.234. Avoid prop drilling deeper than 3 levels; restructure or introduce context.245. Enforce ESLint boundary rules so framework imports cannot leak into portable layers.256. Before interaction/a11y polish, read [references/interactions.md](references/interactions.md).267. Add Storybook stories for main variants; before Storybook-first setup, read [references/storybook.md](references/storybook.md).278. For WRONG vs CORRECT Container/View and handlers/deps, read [references/examples.md](references/examples.md).2829## Resources3031- [references/examples.md](references/examples.md) — Container/View, handlers/deps, a11y WRONG/CORRECT. Read when implementing or reviewing.32- [references/patterns.md](references/patterns.md) — React Query, URL state, React 19, forms, hooks, folders, ESLint. Read before data/state work.33- [references/interactions.md](references/interactions.md) — keyboard, targets, forms, feedback, animation, a11y, performance. Read before polish.34- [references/storybook.md](references/storybook.md) — per-component stories, MSW, play functions. Read when adding stories.3536## Validation3738- [ ] Presentational code has no framework imports; boundary ESLint passes39- [ ] Container/View split; DI `handlers`/`deps` for side effects40- [ ] URL state parsed once at boundary with Zod (or nuqs)41- [ ] React Query with a stable key factory42- [ ] Loading, error, empty states; skeletons match final layout43- [ ] Keyboard-operable; visible `:focus-visible`; hit targets ≥24px / ≥44px mobile44- [ ] Icon-only buttons have `aria-label`; `prefers-reduced-motion` respected45- [ ] Storybook covers main variants; tests only where they add value4647## Constraints4849- Throwaway spikes may prototype first; then apply this architecture before shipping.50- Adjacent: `storybook-journeys` (page flows), `ui-design-principles` (visual), `agent-browser` (browser verify), `testing-strategy`, `validation-boundary`, `fn-args-deps`, `strict-typescript`.
jagreehal