Generate an 8-step spacing scale token file from a detected codebase grid.
npx skills add https://github.com/Dragoon0x/dragoon-skills --skill spacing
Please help me install this Agent Skill. Skill: spacing Source: https://github.com/Dragoon0x/dragoon-skills/tree/main/skills/spacing Command: npx skills add https://github.com/Dragoon0x/dragoon-skills --skill spacing
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.
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.
High-intent search queries and answers about installing and using this skill.
You can generate a standardized 8-step spacing scale token file anchored to the spacing grid detected in your codebase, producing t-shirt sized tokens from xs through 4xl as multiples of the detected grid.
Yes, flexible output formatting supports exporting the generated spacing scale tokens in formats compatible with popular tools like Tailwind CSS for direct integration into your layout system.
The best way to clean up inconsistent, off-grid spacing values is to formalize them into a maintainable 8-step spacing token system that automatically matches your existing design patterns and detected grid.
Grid detection scans your codebase to identify the existing spacing grid base, such as 4px or 8px, and anchors the generated xs through 4xl spacing scale tokens as direct multiples of that detected grid value.
No, you do not need existing design tokens. The tool detects the underlying spacing grid directly from your codebase to scaffold a new layout system and standardize off-grid values.
This tool provides a basic 8-step scale from xs to 4xl based on detected grid multiples. It focuses on standardizing spacing values and may not cover highly custom or non-linear layout system requirements.
penpotAudit Penpot designs for token governance issues and generate severity reports.
johnlindquistManage design tokens and export them to CSS, JSON, and Tailwind config.
WellApp-aiAlign UI decisions with design system tokens, Storybook stories, and codebase patterns.
Impertio-StudioGuide Tailwind CSS design tokens, configuration, and responsive patterns.
