skill CX Codex

spacing-system — Claude Code skill: what it does, how to install

Q: How to install spacing-system in Claude Code?

Run `npx skills add Owl-Listener/designer-skills --skill spacing-system -a claude-code`. The tool places the skill directly into your agent environment.

Builds a systematic spacing scale from a 4px or 8px base unit with rules for padding and margins. Useful when cleaning up inconsistent layout values.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add Owl-Listener/designer-skills --skill spacing-system -a claude-code

Open on GitHub

What spacing-system does

The skill builds an interface spacing scale around a chosen base unit, typically 4px or 8px. Values range from 2xs (2px) up to 3xl (64px). The agent separates spaces into four categories: Inset padding for containers, Stack for vertical flow, Inline for horizontal arrangements, and Grid gap for layout items. Related elements take tighter steps like sm or md, while major layout divisions use lg or xl.

It supports three density modes. Compact shifts every value down by one step for data-heavy views. Comfortable provides the baseline spacing. Spacious increases values by one step for reading contexts.

This skill intentionally excludes page-level columns and gutters. Those layout mechanics belong to layout-grid instead.

What it helps with

standardize padding and margin tokens across UI components
eliminate arbitrary pixel values in stylesheets
configure a compact density mode for dense data tables
separate component-level padding from layout element spacing

Example prompts for the agent

Generate an 8px-based spacing scale for our UI library.
Apply Stack and Inline spacing to this settings page.
Adjust this table component to use the Compact density mode.

How to install spacing-system

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill spacing-system -a claude-code

2Manually: put the files in place

~/.claude/skills/spacing-system/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/spacing-system/

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill spacing-system -a codex

2Manually: put the files in place

.agents/skills/spacing-system/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill spacing-system -a cursor

2Manually: put the files in place

.cursor/skills/spacing-system/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install Owl-Listener/designer-skills spacing-system

2Manually: put the files in place

.github/skills/spacing-system/SKILL.md

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill spacing-system -a gemini-cli

2Platform CLI

gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/spacing-system

Manually: put the files in place

.devin/skills/spacing-system/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill spacing-system -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about spacing-system

How to install spacing-system in Claude Code?

Run npx skills add Owl-Listener/designer-skills --skill spacing-system -a claude-code. The tool places the skill directly into your agent environment.

What does spacing-system do?

It defines spacing tokens from 2xs to 3xl and enforces rules for component padding, inline gaps, and vertical stacks.

When should I use layout-grid instead of spacing-system?

Use spacing-system for margins, paddings, and component gaps. Page-level column structures and gutters are handled by layout-grid.

Source text

SKILL.md · MIT

---
name: spacing-system
description: Create a spacing scale from a base unit with rules for when each step applies. Use when standardising padding and margins. For page-level columns and gutters, use `layout-grid`.
---
# Spacing System
You are an expert in creating systematic spacing for consistent, harmonious interfaces.
## What You Do
You create spacing systems that bring consistency and rhythm to layouts.
## Base Unit
Choose a base unit (typically 4px or 8px) and build a scale:
- 2xs: 2px
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
- 2xl: 48px
- 3xl: 64px
## Spacing Types
- **Inset**: Padding inside containers (equal or squish/stretch variants)
- **Stack**: Vertical space between stacked elements
- **Inline**: Horizontal space between inline elements
- **Grid gap**: Space between grid/flex items
## Application Rules
- Related items: smaller spacing (sm/md)
- Distinct sections: larger spacing (lg/xl)
- Page margins: consistent per breakpoint
- Component internal: defined per component
## Density Modes
- Compact: reduce spacing by one step (for data-heavy views)
- Comfortable: default spacing
- Spacious: increase spacing by one step (for reading-focused)
## Best Practices
- Always use the scale — never arbitrary values
- Consistent spacing within components
- Larger gaps between unrelated groups
- Document spacing intent, not just values
- Test spacing at different viewport sizes

Similar skills

Everything for Design →

tailwind-design-system sickn33 A skill that keeps the agent on Tailwind while you build a design system: tokens, component variants, responsive patterns, accessibility. Useful when the UI drifts. CX Codex +1 1,600installs arrange aladicf A skill that fixes weak spatial composition: arbitrary spacing, crowded groups, monotonous card grids. CX Codex +1 577installs extract-design-system arvindrk This skill extracts design primitives from a public website and generates starter tokens.json and tokens.css files for your project. CX Codex +1 130,700installs design-system claudekit This skill builds design tokens, component specs, and presentation slides. Use it when an interface and its slides need to follow one visual system. CX Codex +1 42,700installs ui-design-system Alireza Rezvani This skill builds design tokens, component structures, and responsive calculations. Use it when a project needs a consistent UI system or a developer handoff. 1,076installs design-system-generator OneWave-AI Builds a design system from tokens, base components and docs. Useful once a second screen shows up and your colors start drifting. CX Codex +1 300installs

From the same set111

icon-system Sets design specifications for icon systems, covering grids, size tiers, naming rules, and accessibility. Ideal for standardising iconography in design systems. CX Codex +1 2,400installs user-flow-diagram Draws screen-level flow diagrams with entry points, decision branches and error paths. Useful when a feature needs step-by-step specs. CX Codex +1 2,400installs dark-mode-design This skill turns an existing light palette into a dark theme: surface elevation, contrast, desaturated accents. Use it when the light tokens already exist. CX Codex +1 2,400installs responsive-design A skill that steers your coding agent toward layouts and interactions that hold up across screen sizes and input methods. CX Codex +1 2,300installs heuristic-evaluation This skill reviews interfaces against Nielsen’s heuristics and domain criteria, then rates finding severity. Use it before user testing when you need an expert audit. CX Codex +1 2,400installs usability-test-plan Builds a usability test plan: research questions, methodology, participant criteria, metrics and a facilitation script. Useful when the study is still being planned. CX Codex +1 2,200installs case-study Structures design portfolio case studies around process evidence, personal contribution, and business metrics. Built for presenting projects to external audiences. CX Codex +1 2,200installs design-token Defines and organises colour, spacing, type and elevation tokens with naming and usage rules. Useful when you are laying down the token layer. CX Codex +1 2,200installs