Layout, Spacing & Grids Skill

How this skill behaves (read first)

This is a generative foundation skill. Layout is where an AI assistant's output is quietly amateurish: Claude reaches for arbitrary spacing (13px here, 27px there), pads things by eyeball, mixes alignments, drops content onto the canvas with no grid, and gives every element the same visual weight so nothing reads as more important. The fixes are systematic, not cosmetic — a base unit, a scale, a grid, consistent alignment, and space used deliberately to group and to rank.

So this skill gates:

1. Establish context — platform/density, content type, and whether the layout must be responsive (these set the base unit, the grid type, and the column model).
2. Apply the always-true core — one base unit and a spacing/sizing scale, align to a grid, let proximity and whitespace group, and use space to build hierarchy.
3. Surface the context-dependent decisions (base unit, grid type, column model, sizing approach, golden-ratio/rule-of-thirds, token layer, grid-breaking) with trade-offs; let the user choose.

Then it hands off to ux-aesthetics-audit (the composition/spacing/hierarchy review) and ux-accessibility-audit (touch targets, text scaling, reflow), plus ux-mobile-responsiveness-audit when the layout is responsive/mobile.

This skill also owns the spatial visual-hierarchy, alignment, and composition fundamentals (it absorbed the retired visual-hierarchy generative content): hierarchy created through size, position, and space; alignment and proximity; whitespace; rule-of-thirds/golden-ratio placement. It defers type scale/readability to ux-typography, color/contrast for emphasis to ux-color, and the evaluative composition review to ux-aesthetics-audit.

Step 0 — Establish context before laying out