frontend-componentslisted

# Frontend Components: Build It Composable, Control It Centrally, Test the Behavior The standard that exists because a landing page got built as one ~770-line file of hand-duplicated markup, tested by matching copy strings — so the same defect appeared in fifteen places and every "fix" was fifteen edits. **Never again.** ## The Prime Directive Every repeated piece of UI is a **component**. Every value you'd tune more than once (size, colour, spacing, motion, copy) lives in **one central place**. Every test asserts **behavior or structure**, never the presence of a copy string. If you cannot say *"to change X everywhere, I edit exactly one place,"* you are not done. ## 1. Extract, don't duplicate (the rule of N) - A structure that appears **more than twice** is a component. No exceptions for "it's just markup." Copy-paste is a defect you are committing in advance. - **One component owns each repeated structure.** Section wrapper, section head, card grid, terminal chrome, nav — each is exactly one file. Pages are *pure composition* of those. - A one-off (used once) can stay inline, but extract it the moment a second use appears. Don't pre-abstract things used once (that's the opposite mistake). - Specialised variants share a base: a chrome component + a body slot, not two near-identical copies. (Landing example: `Terminal` chrome + `Transcript` / `GateSteps` / `LedgerTable` bodies — every terminal's frame is tuned in one file.) ## 2. Separate structure, conte