Web Layout

Rules only. One skill: core below + surface recipes in references/. Before coding any non-trivial surface: run §Frame, then §Plan, then load the matching recipe.

Frame (decide first, before any markup)

Two frames. Pick one by name and say which, in one line, before writing code.

Test: what scrolls? One stream read top to bottom → document, even when a header or a docs sidebar must stay visible (that is sticky). Several regions that scroll on their own or share the viewport (nav + list + detail, editor + panels, messages + composer) → fixed. Mixed page = document outside, a fixed-style panel with its own scroller inside.

The one mistake that defines this skill: a fixed frame written with min-height: 100dvh instead of height. min-height grows with content, so the shell becomes as tall as the document, not the viewport — the sidebar stretches past the fold and scrolls away, and any tall column drags the whole page long. fixed root takes definite height (h-dvh / h-full) plus overflow-hidden.

Plan (mandatory)

Emit before code (one block):

1. Frame — fixed or document, one clause of why
2. Surface + audience — e.g. “B2B dashboard for ops”
3. Layout concept — 1 sentence + ASCII wireframe (regions only)
4. Density — spacious | comfortable | dense
5. Focal point — the single thing that wins the squint test
6. Signature bet — one layout risk (asymmetric hero, bento, sticky subnav…) or “none”

If the plan looks like a generic SaaS card kit, revise once before coding.

Spacing (8pt)

--space-xs: 0.25rem; /* 4 */  --space-sm: 0.5rem;  /* 8 */
--space-md: 1rem;    /* 16 */ --space-lg: 1.5rem; /* 24 */
--space-xl: 2rem;    /* 32 */ --space-2xl: 3rem;  /* 48 */
--space-3xl: 4rem;   /* 64 */ --space-4xl: 6rem;  /* 96 */

• Invariant: within_group < between_groups < between_sections (~1.5–2×).
• Siblings: gap only — no child-margin column math.
• No off-scale magic px. Fluid: clamp(var(--space-lg), 4vw, var(--space-3xl)).

Gestalt → hierarchy

• Group with proximity first; cards/borders are a tax.
• Squint: 1 dominant → secondary → chrome. One focal point.
• Adjacent levels ≥ 1.5× size/weight (or clear 400/700 pair).
• Tools order: space → size → weight → color.
• Optical center ≈ 5–8% above geometric (modals/heroes).
• Critical nav/list items: first or last, not mid-buried.

Composition core

• Flex=1D, Grid=2D. Intrinsic: repeat(auto-fit, minmax(min(100%, 280px), 1fr)).
• Break identical 3–6 card grids; never nest cards.
• Body measure 45–75ch. ≤2 alignment types per section.
• Full height: dvh over vh; never a lone h-screen.
• Mobile <768: declare collapse for every multi-col block.
• Columns 4/8/12; gutters 16–32; prefer @container when the component owns width.

Shell (always if app chrome)

• One scroll owner per pane. Name it before you write overflow anywhere.
• Height down: definite-height chain; scrolling child min-h-0; overflow axis min-w-0.
• Chrome: shrink-0. Main: min-width: 0.
• In a fixed frame, charts / maps / media / iframes need a bounded height (fixed value, aspect-ratio, or a minmax(0,1fr) grid row) — they have no intrinsic size and will otherwise push the frame open.
• Details + symptom→cause table → references/shell.md.

Radii / z

• Radius by role (input < card < modal). Nested: outer ≈ inner + gap.
• z: dropdown 10 → sticky 20 → modal-backdrop 30 → modal 40 → toast 50 → tooltip 60. No 9999.

Global ban

Equal spacing · nested cards · every section card-wrapped · icon+title+text card rows as default · monotone dashboards · numbered eyebrows · fake div “screenshots” · undeclared mobile collapse · flex calc columns · Grid-for-everything · z-9999 · min-height:100dvh as a fixed shell root · scrollable flex child without min-h-0 · sidebar that scrolls away with the document · unbounded chart/media height inside a fixed frame

Pre-ship

• Frame named before code; root matches the table
• Plan block existed and was followed
• Correct recipe loaded for the surface
• Exactly one scroll owner per pane; every scroller has min-h-0
• Squint = one focal point; spacing rhythm holds
• Mobile collapse explicit
• Surface-specific checklist in the recipe file passes

References: ui-craft, impeccable/atelier, shadcn-layouts, interface-design, taste-skill, Vizro, Owl grid/spacing, DESIGN.md.