spacing-scale

Generate centered exponential spacing scales for CSS, Tailwind, and JSON tokens.

38|3|Updated Dec 29, 2025

Search Tags:#tailwind #tokens #generate #design-system #spacing #css-variables #json-tokens

Ready to run

npx skills add https://github.com/dylantarre/design-system-skills --skill spacing-scale

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: spacing-scale
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/tokens/spacing-scale
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill spacing-scale

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about spacing-scale

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate a consistent spacing scale for my design system?▼

Generate a consistent spacing scale by defining a base value, an exponential ratio, and a step count to produce scalable tokens. This provides standardized margins, padding, and gaps, eliminating ad-hoc spacing decisions across layout components.

Can I output CSS variables and Tailwind config tokens from one spacing scale?▼

Yes, you can output CSS variables and Tailwind config tokens from a single generated spacing scale. The tool supports multiple output formats including CSS custom properties, Tailwind spacing definitions, and JSON tokens for seamless integration.

What is an exponential spacing scale and when do I need it?▼

An exponential spacing scale calculates layout dimensions using a base value multiplied by a consistent ratio across each step. You need it when building token-based design systems requiring predictable, scalable spacing for margins, padding, and grid gaps.

Does the generated spacing scale support tshirt naming conventions?▼

Yes, the generated spacing scale supports configurable naming styles including tshirt and numeric naming conventions. This allows you to map arbitrary spacing values to a named scale, simplifying migration and standardizing component layouts.

How do I configure the base value and ratio for my spacing tokens?▼

Configure spacing tokens by providing a base value and a ratio to generate a centered exponential spacing scale. For example, using a base of 4 and a ratio of 1.5 generates a 10-step scale covering consistent layout measurements.

What's the best way to standardize margins and padding across CSS and JSON tokens?▼

Standardize margins and padding by generating a centralized spacing scale and exporting it as CSS custom properties and JSON tokens. This ensures consistent layout values across your design system and prevents mismatches between components.