web-dev-frontendlisted

# Web dev - frontend ## Type discipline - TypeScript strict mode is non-negotiable. No `any`, no `// @ts-ignore`, no `as unknown as T` to silence the compiler. If a type is wrong, fix the type - don't cast around it. - Prefer `unknown` over `any` at boundaries; narrow with type guards or zod. - Use `readonly` for arrays/objects that must not mutate. Use `as const` for literal narrowing. - Discriminated unions over optional-everywhere objects. A `Result<T, E>` or `{ status: 'idle' | 'loading' | 'success' | 'error' }` beats five booleans. - Validate every API/network/localStorage/URL boundary with zod. Inferred TS types come from the schema, not the other way around. ## Component design - Components are functions. No classes unless wrapping a third-party imperative API. - One responsibility per component. Splitting a 200-line component is almost always an improvement. - Props interfaces named `<Component>Props`. Keep them small - if a component needs 12 props, it's two components. - Avoid prop drilling past 2 levels. Lift to context, a store, or composition (children/render-props). - `key` on lists must be a stable id from the data, never the array index unless the list is immutable and append-only. ## Atomic design (when working in a design system) - **Atoms** = single-element primitives (Button, Input, Chip). - **Molecules** = compositions of atoms with one job (FormField = Label + Input + error). - **Organisms** = page-level building blocks with business meaning (Dashboar