How do I install the Spacing Scale skill?

Run npx get-skill add tomevault-io/spacing-scale in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Spacing Scale safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Spacing Scale?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Spacing Scale free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Spacing Scale?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Spacing Scale by tomevault-io — Agent Skill

Name: Spacing Scale
Author: tomevault-io

File contents

Spacing Scale Generator

Overview

Generate consistent spacing scales using a base value and ratio. Creates exponentially distributed values centered around a base unit for harmonious layouts.

When to Use

Setting up spacing tokens for a new project
Standardizing padding and margin values
Creating a gap/grid system
Migrating from arbitrary spacing to tokens

Quick Reference

Naming Style	Example Names	Best For
T-shirt	xs, sm, md, lg, xl	Semantic, readable
Numeric	100, 200, 300...	Precise, extensible

Unit	When to Use
px	Fixed layouts, pixel-perfect designs
rem	Scalable, respects user font settings
em	Component-relative spacing

The Process

Get base value: Default 4px or 0.25rem (common base unit)
Get ratio: How much each step grows (1.5 is balanced, 2 is dramatic)
Ask steps: How many spacing values (8-12 is typical)
Ask naming: T-shirt sizes (xs, sm, md, lg) or numeric (100, 200, 300)?
Ask unit: px, rem, or em?
Ask format: CSS, Tailwind, or JSON?
Generate: Create scale centered on base, expanding in both directions

Common Ratios

Ratio	Character	Example (base 4px)
1.25	Tight	2, 2.5, 3, 4, 5, 6, 8
1.5	Balanced	1.8, 2.7, 4, 6, 9, 13.5
1.618	Golden	1.5, 2.5, 4, 6.5, 10.5, 17
2	Dramatic	1, 2, 4, 8, 16, 32

Output Formats

CSS Custom Properties:

:root {
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 16px;
  --spacing-xl: 32px;
}

Tailwind Config:

module.exports = {
  theme: {
    spacing: {
      'xs': '2px',
      'sm': '4px',
      'md': '8px',
      'lg': '16px',
      'xl': '32px',
    }
  }
}

JSON Tokens:

{
  "spacing": {
    "xs": "2px",
    "sm": "4px",
    "md": "8px",
    "lg": "16px",
    "xl": "32px"
  }
}

Algorithm

The scale is centered on the base value at the midpoint:

value = baseValue * (ratio ^ (step - midpoint))

For a 10-step scale with base 4 and ratio 1.5:

Step 0 (5 below mid): 4 * 1.5^-5 = 0.53
Step 5 (midpoint): 4 * 1.5^0 = 4
Step 9 (4 above mid): 4 * 1.5^4 = 20.25

T-shirt Size Mapping

Full range: 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl

The midpoint of your scale maps to "md" and expands outward.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: spacing-scaledescription: Generates consistent spacing tokens using base values and ratios. Use when creating margin/padding systems, gap tokens, or layout spacing. Outputs CSS custom properties, Tailwind config, or JSON tokens.---# Spacing Scale Generator## OverviewGenerate consistent spacing scales using a base value and ratio. Creates exponentially distributed values centered around a base unit for harmonious layouts.## When to Use- Setting up spacing tokens for a new project- Standardizing padding and margin values- Creating a gap/grid system- Migrating from arbitrary spacing to tokens## Quick Reference| Naming Style | Example Names | Best For ||--------------|---------------|----------|| T-shirt | xs, sm, md, lg, xl | Semantic, readable || Numeric | 100, 200, 300... | Precise, extensible || Unit | When to Use ||------|-------------|| px | Fixed layouts, pixel-perfect designs || rem | Scalable, respects user font settings || em | Component-relative spacing |## The Process1. **Get base value**: Default 4px or 0.25rem (common base unit)2. **Get ratio**: How much each step grows (1.5 is balanced, 2 is dramatic)3. **Ask steps**: How many spacing values (8-12 is typical)4. **Ask naming**: T-shirt sizes (xs, sm, md, lg) or numeric (100, 200, 300)?5. **Ask unit**: px, rem, or em?6. **Ask format**: CSS, Tailwind, or JSON?7. **Generate**: Create scale centered on base, expanding in both directions## Common Ratios| Ratio | Character | Example (base 4px) ||-------|-----------|-------------------|| 1.25 | Tight | 2, 2.5, 3, 4, 5, 6, 8 || 1.5 | Balanced | 1.8, 2.7, 4, 6, 9, 13.5 || 1.618 | Golden | 1.5, 2.5, 4, 6.5, 10.5, 17 || 2 | Dramatic | 1, 2, 4, 8, 16, 32 |## Output Formats**CSS Custom Properties:**```css:root { --spacing-xs: 2px; --spacing-sm: 4px; --spacing-md: 8px; --spacing-lg: 16px; --spacing-xl: 32px;}```**Tailwind Config:**```jsmodule.exports = { theme: { spacing: { 'xs': '2px', 'sm': '4px', 'md': '8px', 'lg': '16px', 'xl': '32px', } }}```**JSON Tokens:**```json{ "spacing": { "xs": "2px", "sm": "4px", "md": "8px", "lg": "16px", "xl": "32px" }}```## AlgorithmThe scale is centered on the base value at the midpoint:```value = baseValue * (ratio ^ (step - midpoint))```For a 10-step scale with base 4 and ratio 1.5:- Step 0 (5 below mid): 4 * 1.5^-5 = 0.53- Step 5 (midpoint): 4 * 1.5^0 = 4- Step 9 (4 above mid): 4 * 1.5^4 = 20.25## T-shirt Size MappingFull range: 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xlThe midpoint of your scale maps to "md" and expands outward.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/dylantarre) — claim your Tome and manage your conversions.

Frequently asked questions

Spacing Scale