{
"markdown": "\n\n# 📐 spacing-skill\n\n### The Anti-Cramped Spacing Skill for AI Agents\n\n*One scale. Real rhythm. Optical alignment. UI that breathes instead of looking templated.*\n\n[](LICENSE)\n[](https://github.com/buidangminh23/spacing-skill)\n[](https://github.com/buidangminh23/spacing-skill)\n[](https://github.com/buidangminh23/spacing-skill)\n\n
\n\n---\n\n## Why\n\nThe fastest tell of AI-generated UI is **spacing**, not color or typography:\n`p-4` on every container, `gap-2` between unrelated things, magic numbers like\n`13px`, headings orphaned by symmetric margins, everything equally cramped.\n\n`spacing-skill` gives an agent a spacing *system* — read the layout, set three\ndials, pull every value from one scale, encode relationships with proximity, and\nlet type drive vertical rhythm. It's contextual: nothing fires automatically, so\na dashboard doesn't get marketing-hero air and a hero doesn't get table density.\n\n---\n\n## Install\n\nPick your tool. Every block below has a **copy button** (hover its top-right corner).\n\n#### `npx` · skills\n\n```bash\nnpx skills add buidangminh23/spacing-skill\n```\n\n#### `npx` · add-skill\n\n```bash\nnpx add-skill buidangminh23/spacing-skill\n```\n\n#### Claude Code · native plugin (run inside Claude Code)\n\n```text\n/plugin marketplace add buidangminh23/spacing-skill\n/plugin install spacing-skill@spacing-skill\n```\n\n#### Cursor\n\n```bash\nnpx skills add buidangminh23/spacing-skill -a cursor\n```\n\n#### Codex · native marketplace\n\n```text\ncodex plugin marketplace add buidangminh23/spacing-skill\n```\n\n#### Gemini CLI · native extension\n\n```bash\ngemini extensions install https://github.com/buidangminh23/spacing-skill\n```\n\n**Works with:** Claude Code · Cursor · Codex · Gemini CLI.\nSkill name once loaded: **`design-spacing-rhythm`** → then prompt *\"Use the spacing-rhythm skill.\"*\n\n\nMore options — global flags, other agents (Cline, opencode…), manual install
\n\nThe `skills` CLI targets any agent with `-a` and installs to the user directory with `-g`:\n\n| Tool | Command |\n|---|---|\n| Claude Code | `npx skills add buidangminh23/spacing-skill -a claude-code -g` |\n| Codex | `npx skills add buidangminh23/spacing-skill -a codex -g` |\n| Cursor | `npx skills add buidangminh23/spacing-skill -a cursor -g` |\n| Cline | `npx skills add buidangminh23/spacing-skill -a cline -g` |\n| opencode | `npx skills add buidangminh23/spacing-skill -a opencode -g` |\n| Several at once | `npx skills add buidangminh23/spacing-skill -a claude-code -a cursor -a codex` |\n\nDrop `-g` for a project-local install. Manage with `npx skills list`, `npx skills update`, `npx skills remove`.\n\n**Manual (portable)** — fetch the file once, then place it where your agent looks:\n\n```bash\ncurl -fsSL https://raw.githubusercontent.com/buidangminh23/spacing-skill/main/skills/spacing-skill/SKILL.md -o SKILL.md\n```\n\n| Tool | Where it goes |\n|---|---|\n| Claude Code | `~/.claude/skills/design-spacing-rhythm/SKILL.md` (global) or `.claude/skills/…` (project) |\n| Codex | save in repo, then reference from `AGENTS.md` |\n| Cursor | rename to `.cursor/rules/spacing-skill.mdc` |\n| Cline / opencode / others | drop into the agent's skills/rules folder, or paste `SKILL.md` as context |\n\n \n\n---\n\n## Skills\n\n| Folder | Install name | What it does |\n|---|---|---|\n| `skills/spacing-skill` | `design-spacing-rhythm` | Anti-cramped spacing: one scale, vertical rhythm, whitespace hierarchy, optical alignment, responsive density, accessibility floors, document & long-form (Word/Docs/PDF) spacing, and a pre-flight checklist. |\n\n---\n\n## Settings — The Three Dials\n\nEvery spacing decision is gated by three dials. Defaults assume a general product\nUI; override them conversationally (\"make it denser\", \"this feels cramped\").\n\n| Dial | Range | Default | Meaning |\n|---|---|---|---|\n| `SPACING_STEP` | 4 / 8 | **8** | Base grid unit (px). `4` for dense data UI, `8` for clean general layout. |\n| `DENSITY` | 1–10 | **4** | `1` = art-gallery airy (marketing) → `10` = cockpit packed (tables/terminals). |\n| `ALIGNMENT_RIGOR` | 1–10 | **7** | `1` = freeform/editorial → `10` = strict grid- and baseline-locked. |\n\nThe skill infers these from a one-line **\"Space Read\"** before generating any\ncode — e.g. *\"Spacing this as: a SaaS landing at density 3, on an 8px scale, with\ngenerous section rhythm.\"*\n\n---\n\n## What's inside the skill\n\n16 sections, all dial-driven and contextual:\n\n- **§0 Space Inference** — read signals, emit a one-line \"Space Read\", anti-default discipline.\n- **§1 The three dials** — inference tables mapping the situation to dial values.\n- **§2 One spacing scale** — px-keyed, Tailwind-aligned; primitive vs semantic tokens; modular macro tier. No magic numbers, ever.\n- **§3 Primitives & gap ownership** — stack / inline / inset / grid-gap, and the single-owner law.\n- **§4 Layout grid & alignment** — 12-col grid, measure (45–75ch), flex/grid alignment toolkit, subgrid for aligned card internals.\n- **§5 Vertical rhythm** — type drives spacing; asymmetric heading margins; control heights from line-height + inset.\n- **§6 Whitespace hierarchy** — the proximity ladder (intra < inter-item < inter-group, ≥1.5×).\n- **§7 Optical alignment** — asymmetric glyph nudges, icon↔text cap-band, hanging punctuation, overshoot.\n- **§8 Responsive & fluid spacing** — `clamp()`, mobile density step-down, container queries, logical properties, safe-area insets.\n- **§9 Accessibility floors** — verified WCAG numbers (2.5.8 / 2.5.5 / 1.4.12 / 1.4.10), Apple 44pt / Material 48dp.\n- **§10 Component recipes** — buttons, inputs, forms, cards, nav, modals, tables, chips, menus, sections, media.\n- **§11 Anti-pattern catalog** — 14 AI spacing tells, each with the fix.\n- **§12 Implementation per stack** — Tailwind, plain CSS, MUI/Chakra/Radix/shadcn, design tokens, debugging.\n- **§13 Operating procedure** — 8-step pipeline, conversational override protocol, full pre-flight checklist.\n- **§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.\n- **§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.\n\n---\n\n## Continuous improvement\n\nThis skill is built to **get sharper with use** (§15). Every real spacing or\nalignment edit is captured in [`LEARNINGS.md`](LEARNINGS.md) — a one-line Space\nRead, the real numbers, and a `covered` / `gap` / `refinement` verdict — and any\nlesson that generalizes is distilled back into `SKILL.md` with a `CHANGELOG.md`\nversion bump. The journal stays out of the context-loaded skill, so the brain\nstays lean while the experience compounds.\n\n---\n\n## Common Questions\n\n**Does it work outside Claude Code?**\nYes. `SKILL.md` is a portable instruction file. Drop it into Codex, Cursor, or\nany agent that can load skill/instruction files, or paste it as context.\n\n**Tailwind only?**\nNo. The default scale matches Tailwind so it drops in cleanly, but §12\n(Implementation per stack) covers plain CSS variables, component libraries, and\ndesign tokens.\n\n---\n\n\n\n**MIT Licensed** · Built by [buidangminh23](https://github.com/buidangminh23)\n\n*Give it room — but give it measured room.*\n\n
\n",
"bytes": 7724,
"sha": "2424306691b3eeddc4720c8af921ea5a352048a3c9231bc177a312d99f2b6199",
"repo_slug": "buidangminh23/spacing-skill",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/plg_buidangminh23_spacing_skill_034fe639/readme"
}