# Spacing

> Generate a complete spacing scale from a base unit. Outputs CSS custom properties and shows recommended usage for each step.

- Skill: `dragoon0x/spacing` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add dragoon0x/spacing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/spacing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/spacing

---


# /spacing — Spacing Scale Generator

## Usage
`/spacing [base-unit]` (default: 4px)

Generate the full scale:
- --space-1: 4px (tight inline spacing)
- --space-2: 8px (default inline spacing, icon gaps)
- --space-3: 12px (compact card padding)
- --space-4: 16px (standard card padding, form gaps)
- --space-5: 20px (comfortable padding)
- --space-6: 24px (section internal padding)
- --space-8: 32px (large gaps, card spacing)
- --space-10: 40px (section breaks)
- --space-12: 48px (major section padding)
- --space-16: 64px (section vertical padding)
- --space-20: 80px (large section padding)
- --space-24: 96px (hero-level spacing)
- --space-32: 128px (maximum spacing)

Output as CSS custom properties and Tailwind spacing config.