Why

The fastest tell of AI-generated UI is spacing, not color or typography:
p-4 on every container, gap-2 between unrelated things, magic numbers like
13px, headings orphaned by symmetric margins, everything equally cramped.

spacing-skill gives an agent a spacing system — read the layout, set three
dials, pull every value from one scale, encode relationships with proximity, and
let type drive vertical rhythm. It's contextual: nothing fires automatically, so
a dashboard doesn't get marketing-hero air and a hero doesn't get table density.

Install

Pick your tool. Every block below has a copy button (hover its top-right corner).

npx · skills

npx skills add buidangminh23/spacing-skill

npx · add-skill

npx add-skill buidangminh23/spacing-skill

Claude Code  ·  native plugin (run inside Claude Code)

/plugin marketplace add buidangminh23/spacing-skill
/plugin install spacing-skill@spacing-skill

Cursor

npx skills add buidangminh23/spacing-skill -a cursor

Codex  ·  native marketplace

codex plugin marketplace add buidangminh23/spacing-skill

Gemini CLI  ·  native extension

gemini extensions install https://github.com/buidangminh23/spacing-skill

Works with: Claude Code · Cursor · Codex · Gemini CLI.
Skill name once loaded: design-spacing-rhythm → then prompt "Use the spacing-rhythm skill."

The skills CLI targets any agent with -a and installs to the user directory with -g:

Drop -g for a project-local install. Manage with npx skills list, npx skills update, npx skills remove.

Manual (portable) — fetch the file once, then place it where your agent looks:

curl -fsSL https://raw.githubusercontent.com/buidangminh23/spacing-skill/main/skills/spacing-skill/SKILL.md -o SKILL.md

Skills

Settings — The Three Dials

Every spacing decision is gated by three dials. Defaults assume a general product
UI; override them conversationally ("make it denser", "this feels cramped").

The skill infers these from a one-line "Space Read" before generating any
code — e.g. "Spacing this as: a SaaS landing at density 3, on an 8px scale, with
generous section rhythm."

What's inside the skill

16 sections, all dial-driven and contextual:

• §0 Space Inference — read signals, emit a one-line "Space Read", anti-default discipline.
• §1 The three dials — inference tables mapping the situation to dial values.
• §2 One spacing scale — px-keyed, Tailwind-aligned; primitive vs semantic tokens; modular macro tier. No magic numbers, ever.
• §3 Primitives & gap ownership — stack / inline / inset / grid-gap, and the single-owner law.
• §4 Layout grid & alignment — 12-col grid, measure (45–75ch), flex/grid alignment toolkit, subgrid for aligned card internals.
• §5 Vertical rhythm — type drives spacing; asymmetric heading margins; control heights from line-height + inset.
• §6 Whitespace hierarchy — the proximity ladder (intra < inter-item < inter-group, ≥1.5×).
• §7 Optical alignment — asymmetric glyph nudges, icon↔text cap-band, hanging punctuation, overshoot.
• §8 Responsive & fluid spacing — clamp(), mobile density step-down, container queries, logical properties, safe-area insets.
• §9 Accessibility floors — verified WCAG numbers (2.5.8 / 2.5.5 / 1.4.12 / 1.4.10), Apple 44pt / Material 48dp.
• §10 Component recipes — buttons, inputs, forms, cards, nav, modals, tables, chips, menus, sections, media.
• §11 Anti-pattern catalog — 14 AI spacing tells, each with the fix.
• §12 Implementation per stack — Tailwind, plain CSS, MUI/Chakra/Radix/shadcn, design tokens, debugging.
• §13 Operating procedure — 8-step pipeline, conversational override protocol, full pre-flight checklist.
• §14 Document & long-form — Word / Google Docs / PDF / Markdown: page margins, line spacing, the indent-vs-space rule, heading styles, print pagination, and a concept→tool mapping.
• §15 Continuous improvement — a field-learnings loop: every real spacing edit is logged in LEARNINGS.md and distilled back into the skill, so it gets sharper with use.

Continuous improvement

This skill is built to get sharper with use (§15). Every real spacing or
alignment edit is captured in LEARNINGS.md — a one-line Space
Read, the real numbers, and a covered / gap / refinement verdict — and any
lesson that generalizes is distilled back into SKILL.md with a CHANGELOG.md
version bump. The journal stays out of the context-loaded skill, so the brain
stays lean while the experience compounds.

Common Questions

Does it work outside Claude Code?
Yes. SKILL.md is a portable instruction file. Drop it into Codex, Cursor, or
any agent that can load skill/instruction files, or paste it as context.

Tailwind only?
No. The default scale matches Tailwind so it drops in cleanly, but §12
(Implementation per stack) covers plain CSS variables, component libraries, and
design tokens.