react-ruleslisted

# subroutine — React rules discipline Applies to React component and hook files (front-of-stack), battle-tested across React codebases. The repo's `apps/*/AGENTS.md` wins on stack specifics (router, forms lib, design system, i18n) — read it first; this is the structural discipline that holds regardless. ## Rule 1 — One component per file Exactly one React component definition per file. No second "private" component (`const Row = ...`, `function Header() {}`) in the same file. Non-component helpers (constants, types, small pure functions) are fine. Need another component → new sibling file or folder. ## Rule 2 — Folder structure mirrors the JSX tree If `A` renders `B`, `C`, `D`, then `A/` contains `B`, `C`, `D` as files or subfolders. - **Single file** (default): a leaf with no sub-components → `Parent/Name.tsx`. - **Folder with `index.tsx`**: has sub-components or colocated files (`hooks.ts`, `types.ts`) → `Name/index.tsx` exports one component named `Name`. - `index.tsx` is **layout-only** — composition with flex/grid, no data fetching, no business logic. - Colocate support code next to the component; a hook used by multiple files gets its own `useXxx.ts` (never exported from `index.tsx`). - Shared-by-siblings components live at the lowest common ancestor, not a global `components/`. Keep depth ≤ 2–3 levels. ## Rule 3 — Props are IDs and primitives, never domain objects ```tsx <ContactRoleSelect contact={contact} /> // ✗ <ContactRoleSelect dealId={