apply-consistent-spacing
CommunityCreate clear UI rhythm with a spacing system
Design & Creative#design system#whitespace#ui spacing#typography rhythm#proximity grouping#layout refactor
Authorgnurio
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Inconsistent, arbitrary spacing makes UI layouts feel messy, ambiguous, and hard to scan, because related elements aren’t reliably grouped and unrelated sections don’t separate cleanly.
Core Features & Use Cases
- Systematic spacing scale: Enforces a structured rhythm with 25% minimum jumps (e.g., 12px → 16px → 24px → 32px) to make spacing values clearly distinguishable.
- Proximity-based grouping: Ensures more space surrounds a group than exists within it, improving perceived relationships without relying on borders.
- Density control with actionable fixes: Produces an updated spacing scale plus specific margin/padding adjustments and a pass/fail assessment of current spacing quality.
Quick Start
Use apply-consistent-spacing to evaluate the spacing in your UI layout and generate a corrected spacing scale that separates groups and improves whitespace rhythm.
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: apply-consistent-spacing Download link: https://github.com/gnurio/refactoring-ui-plugin/archive/main.zip#apply-consistent-spacing 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 471,000+ vetted skills library on demand.