Layout Grid
Grid and alignment rules for a macOS SwiftUI app, with three checks that catch...
Install
npx skills add daveebbelaar/bama --skill layout-grid -g -a claude-code -y- Repository
- daveebbelaar/bama1.3k
- Category
- Mobile
- Updated
- 3d ago
- License
- MIT
- Context cost
- Lightabout 1,186 tokens
- Runs scripts
- No, instructions only
What it does
Grid and alignment rules for a macOS SwiftUI app, with three checks that catch misalignment (a lint for off-grid numbers, a layout probe that measures real frames in snapshot mode, and a grid overlay). Use when building or reviewing a custom page, card, row, form, or sheet, after every build that touched layout, or when the user says something looks misaligned, crooked, cramped, or unevenly spaced.
Layout grid
Agents guess numbers. A guessed .padding(13) looks almost right and
makes the whole app feel slightly off. This skill replaces guessing with
one scale and three checks that fail when something is off.
The template has everything in place: Sources/<App>/UI/Grid.swift and
tools/. For an app made before this skill, copy UI/Grid.swift,
tools/grid-lint.sh, and tools/check-layout.swift from the new-mac-app
skill's template, and the layout file line from its Snapshot.swift.
The rules
- Every padding, spacing, and size comes from
Space:xs 4,sm 8,md 12,lg 16,xl 20,xxl 24,section 32. Raw numbers are 0, 1, 2, or a multiple of 4. - Pages and windows have a 20 pt margin (
Space.margin). Cards pad 16 (Space.lg). Related controls sit 8 apart, groups 20 to 24, sections 32. - Each column has one leading edge. Titles, text, cards, and buttons in a column start on the same x. Indent on purpose, by a step of the scale.
- Let containers do the aligning:
- Labels with controls:
Formwith.formStyle(.grouped), or.columnsfor the Mac layout of right-aligned labels. - Rows and columns of values:
GridandGridRow. - A label with a value:
LabeledContent. - Text of different sizes in one row:
HStack(alignment: .firstTextBaseline). - Numbers in a column:
.monospacedDigit(), trailing aligned. - An icon with text:
Label.
- Labels with controls:
- Sheets are 360, 480, or 640 wide. Controls take their height from
.controlSize, never from a fixed height. - Nested corners are concentric: inner radius = outer radius - padding.
.offsetand.positionmove a view after layout, so nothing lines up with it. Use them only for motion and drag previews, with// grid: ok <why>on the line.- Long text truncates with its full value in a tooltip. Nothing clips.
Check 1: lint the code
Run it after every build that touched views:
