Radii Spacing

Audit your codebase for 8pt grid compliance and spacing consistency

Install in one command

Requires Claude Code. Run from your project root.

$curl -sL https://radii.cloud/skills/radii-spacing.md -o .claude/skills/radii-spacing.md

Then in Claude Code, type /radii-spacing to activate.

About

The 8pt spacing grid is one of the most impactful, least followed design rules in developer codebases. Off-grid values (13px, 22px, 7px) accumulate into visual noise that no single developer notices but every user feels. Radii Spacing scans your project for spacing violations across CSS properties (padding, margin, gap, inset, top/left/right/bottom) and reports a consistency score: what percentage of your spacing values fall on the 4px/8px grid. The output is file-by-file, actionable, and prioritised by frequency — fix the most-used components first.

What it does

Scans CSS, JSX/TSX, and config files for all spacing-related properties (padding, margin, gap, inset, top, right, bottom, left)
Flags off-grid values and outputs executable sed commands to fix them: sed -i 's/padding: 13px/padding: var(--spacing-3)/g' ComponentName.jsx
Calculates a design debt score: % of spacing values off-grid with a rating from Excellent (< 10%) to Critical (> 50%)
Per-file scores with priority labels — fix the most-violated files first
Shows ⚡ Quick Fix commands ranked by frequency: fix the most-used violations with one-liners
Checks Tailwind arbitrary values like p-[13px] alongside raw CSS property usage

Give it

1.CSS files, component files, or describe the spacing pattern you're using
2.Optional: your existing spacing scale if you have one
3.Optional: list files or directories to scan (defaults to src/)

Example output

**Spacing consistency: 61% (14/23 values on-grid)**

Top violations (by frequency):
  padding: 13px — 8 occurrences → var(--spacing-3) 12px | Button.jsx:12, Card.jsx:8, Nav.jsx:22...
  gap: 18px — 5 occurrences → var(--spacing-4) 16px or var(--spacing-5) 20px | Grid.jsx:6, List.jsx:14...
  margin-bottom: 28px — 3 occurrences → var(--spacing-6) 24px | Section.jsx:33, Hero.jsx:18...

File scores:
  Button.jsx: 45% (5/11 on-grid) — most violations, fix first
  Card.jsx:   72% (8/11 on-grid)
  Nav.jsx:    91% (10/11 on-grid) — nearly clean

→ Learn: radii.cloud/terms/spacing-system