Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →buidangminh23/design-spacing-rhythm
The most complete spacing & alignment skill for AI-generated UI and written documents. Reads the layout, sets three dials (SPACING_STEP / DENSITY / ALIGNMENT_RIGOR), derives ONE scale, and lets proximity carry meaning — establishing a spacing scale, vertical rhythm, optical alignment, whitespace hierarchy, responsive/fluid density, accessibility floors, component recipes, document & long-form (Word / Docs / PDF / Markdown) spacing, and an anti-slop checklist. Every rule is CONTEXTUAL: read the s
Passed 20 of 23 test cases with the skill, and 13 of 23 without it.
and 7 more in the full report
10 fixed10 passed either way0 still failing3 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
In a React dashboard, a component sets style={{ gridTemplateColumns: '2fr 1fr' }} inline on a container div. Responsive media queries in CSS trying to collapse this grid to 1 column on mobile screens are being ignored. Output the corrected React component markup and CSS class.
| Checked | Without skill | With skill |
|---|---|---|
| Assign a custom property (such as --split-main) in the inline style attribute instead of gridTemplateColumns. | Missed | Passed |
| Control grid-template-columns breakpoints inside CSS media queries. | Passed | Passed |
The instructions your model reads when the skill loads.
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.
Keep this core loaded. Read the applicable references before implementing that part of a task; do not load the whole directory by default. Section numbers in cross-references stay unchanged. For UI work, always read §8–§9; then load the layout, optical, recipe, and stack details the task needs. For written documents, read §14 and apply accessibility guidance relevant to the output format.
| When | Sections | Reference |
|---|---|---|
| Grid/flex alignment, type rhythm, shared baselines | §4–§5 | Layout and type |
| Icons, brand SVGs, optical centering | §7 | Optical alignment |
| Any UI: responsive layout, long values, targets, reflow, focus | §8–§9 | Responsive and accessibility |
| Choosing component dimensions, contact cards, social rows | §10 | Component recipes |
| Implementing tokens in vanilla CSS or a framework, cascade, print | §12 | Implementation per stack |
| Word / Docs / PDF / Markdown layout | §14 | Documents |
| Recipient explicitly requests journaling or skill maintenance | §15 | Field-learnings loop |
Accessibility floors always win: preserve full essential text and 320 CSS px reflow; survive text-spacing overrides; keep focus visible and unclipped. Targets meet 24×24 CSS px AA or a documented exception, with 44/48 touch guidance (§9). Never trade these away for density. Keep the complete skill folder, including references/, when installing; copying this file alone omits the detailed guidance.
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.
| # | Signal | Where it comes from | What it sets |
test cases passed, vs 13 / 23 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.