layout-grid

1# Layout grid
2 
3Agents guess numbers. A guessed `.padding(13)` looks almost right and
4makes the whole app feel slightly off. This skill replaces guessing with
5one scale and three checks that fail when something is off.
6 
7The template has everything in place: `Sources/<App>/UI/Grid.swift` and
8`tools/`. For an app made before this skill, copy `UI/Grid.swift`,
9`tools/grid-lint.sh`, and `tools/check-layout.swift` from the `new-mac-app`
10skill's template, and the layout file line from its `Snapshot.swift`.
11 
12## The rules
13 
141. Every padding, spacing, and size comes from `Space`: `xs 4`, `sm 8`,
15   `md 12`, `lg 16`, `xl 20`, `xxl 24`, `section 32`. Raw numbers are
16   0, 1, 2, or a multiple of 4.
172. Pages and windows have a 20 pt margin (`Space.margin`). Cards pad 16
18   (`Space.lg`). Related controls sit 8 apart, groups 20 to 24, sections 32.
193. Each column has one leading edge. Titles, text, cards, and buttons in a
20   column start on the same x. Indent on purpose, by a step of the scale.
214. Let containers do the aligning:
22   - Labels with controls: `Form` with `.formStyle(.grouped)`, or
23     `.columns` for the Mac layout of right-aligned labels.
24   - Rows and columns of values: `Grid` and `GridRow`.
25   - A label with a value: `LabeledContent`.
26   - Text of different sizes in one row: `HStack(alignment: .firstTextBaseline)`.
27   - Numbers in a column: `.monospacedDigit()`, trailing aligned.
28   - An icon with text: `Label`.
29…