design-spacing-rhythmlisted

# spacingskill: The Spacing & Rhythm Skill > For any UI **or written document** an agent generates or edits — landing > pages, dashboards, forms, data tables, mobile screens, editorial, and > Word / Google Docs / PDF / Markdown documents (§14). > Spacing is the single fastest tell of AI-generated UI: off-scale magic > numbers, everything equally cramped, no proximity hierarchy, optical > misalignment. > Every rule below is **contextual**. Nothing fires automatically. First read > the layout, set the dials, then pull only what fits. Spacing is a *system*, > not decoration applied at the end. --- ## 0. SPACE INFERENCE — Read the Layout Before a Single Pixel Spacing is a decision made BEFORE the first `<div>` exists. Infer it; do not default to it. State the dials, emit one "Space Read" line, then generate. ### 0.A Signals to read (priority order — higher overrides lower) | # | Signal | Where it comes from | What it sets | |---|--------|---------------------|--------------| | 1 | **Existing scale / tokens** | Tailwind config, `--space-*` / `--spacing` vars, a component lib (MUI/Carbon/Radix/Chakra), repeated literals | SPACING_STEP + the whole scale. Conform, do not invent. | | 2 | **Brand / explicit constraint** | Brand guide, "match our app", a referenced screenshot, a stated number | Overrides aesthetic preference. Lock it, build around it. | | 3 | **Surface kind** | table vs hero vs form vs dashboard | DENSITY + SPACING_STEP start | | 4 | **Density the CONTENT demands*