Skills
.Work. You
Rest

spacing

Community

Create consistent spacing tokens for your codebase.

Design & Creative#frontend#design tokens#tailwind#spacing#grid#spacing scale#layout system
AuthorDragoon0x
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill eliminates the frustration of inconsistent, off-grid spacing values scattered across your codebase that create unpolished user interfaces and require hours of manual standardization work.

Core Features & Use Cases

  • Standardized 8-Step Spacing Scale: Automatically generates a consistent xs/sm/md/lg/xl/2xl/3xl/4xl spacing scale anchored to the grid (e.g. 4px, 8px) detected in your codebase.
  • Flexible Output Formatting: Supports exporting tokens in formats compatible with popular tools like Tailwind CSS.
  • Use Case: Clean up a legacy codebase with random, unaligned spacing values by formalizing them into a maintainable token system that matches your existing design patterns.

Quick Start

Use the spacing skill to generate a consistent 8-step spacing scale token file aligned to your codebase's detected spacing grid, with the option to apply the changes directly to your project.

Dependency Matrix

Required Modules

None required

Components

scripts

💻 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
Download link: https://github.com/Dragoon0x/dragoon-skills/archive/main.zip#spacing

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 536,000+ vetted skills library on demand.