Spacing System

This gives Claude a systematic approach to spacing rather than letting it wing it with arbitrary pixel values. You get an 8 point scale from 2px to 64px, rules for different spacing types (inset, stack, inline, grid gaps), and guidance on when to use what based on content relationships. The density modes are smart, letting you shift the entire scale up or down a notch for compact or spacious layouts. Most useful when you're building a design system from scratch or trying to standardize spacing across an existing codebase. It enforces the discipline of never using random values, which sounds strict but actually makes everything more maintainable.

Install to Claude Code

npx -y skills add owl-listener/designer-skills --skill spacing-system --agent claude-code