# Frontend Craft

Frontend discipline for components, state, and interaction.

## Rules

1. **Components do one job.** A component that fetches, transforms, renders, and handles errors is four components pretending to be one. Split by responsibility.

2. **State lives at the lowest level that needs it.** Don't put form state in global store. Don't prop-drill through six layers when context or composition solves it. Lift state only when two siblings need it.

3. **Loading, error, and empty are required states.** Every async view has three states beyond success. A UI that only handles the happy path breaks the moment reality diverges.

4. **Responsive is not an afterthought.** Layout works at mobile, tablet, and desktop — not "we'll fix mobile later." Test at narrow widths before calling it done.

5. **Interactions give feedback.** Buttons disable during submission. Optimistic updates roll back on failure. Users should never wonder if their click registered.

6. **Match the framework's patterns.** React hooks, Vue composition, Svelte reactivity — use the idioms the framework provides. Fighting the framework creates bugs only you understand.

## What This Replaces

God components, global state for everything, happy-path-only UI, and frontend code that works on your monitor width and nowhere else.