spacing-scale
CommunityGenerate scalable spacing tokens for layouts.
Authordylantarre
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Spacing scales ensure consistent, scalable layout tokens across a design system, eliminating ad-hoc spacing decisions and mismatches between components.
Core Features & Use Cases
- Generate a centered exponential spacing scale using a base value and a ratio.
- Output CSS custom properties, Tailwind spacing, or JSON tokens to standardize margins, padding, and gaps.
- Simple migration: replace arbitrary spacings with a named scale mapped to tshirt or numeric naming.
Quick Start
Provide a base value, ratio, and step count to generate a spacing scale. For example, generate a 10-step scale with base 4 and ratio 1.5, output as CSS variables and Tailwind tokens.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: spacing-scale Download link: https://github.com/dylantarre/design-system-skills/archive/main.zip#spacing-scale Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.