apply-consistent-spacing

Name: apply-consistent-spacing
Availability: InStock
Author: George Nurijanian

Apply a systematic spacing scale to UI layouts with margin and padding values.

240|11|Updated Apr 26, 2026

Search Tags:#design system #whitespace #ui spacing #typography rhythm #proximity grouping #layout refactor

Ready to run

npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill apply-consistent-spacing

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: apply-consistent-spacing
Source: https://github.com/gnurio/refactoring-ui-plugin/tree/main/skills/04-apply-consistent-spacing
Command: npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill apply-consistent-spacing

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about apply-consistent-spacing

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

FAQPage Schema

How do I fix inconsistent UI spacing and improve visual grouping in my layout?▼

To fix inconsistent UI spacing, apply a systematic spacing scale that enforces minimum 25% step differences between tiers. This proximity-based grouping ensures more space surrounds a group than exists within it, removing ambiguous whitespace relationships without relying on borders.

What is a systematic spacing scale and how does it create UI rhythm?▼

A systematic spacing scale creates UI rhythm by enforcing structured, clearly distinguishable whitespace increments, such as 12px, 16px, 24px, and 32px. This structured typography rhythm ensures spacing values are reliably differentiated, making layouts easier to scan and visually organized.

How do I refactor spacing density to improve whitespace relationships in a UI?▼

Refactor spacing density by evaluating your current layout and generating a corrected spacing scale. This process produces specific margin and padding adjustments that prioritize whitespace around groups, ensuring unrelated sections separate cleanly and improving overall proximity grouping.

Can I assess my current UI layout spacing to see if it needs a refactor?▼

Yes, you can assess current UI layout spacing to determine if a refactor is needed. The evaluation produces a pass or fail assessment of your current spacing quality, identifying inconsistent and arbitrary whitespace relationships that make layouts feel messy and hard to scan.

What is the best way to standardize margin and padding values across UI components?▼

The best way to standardize margin and padding values is to enforce a structured spacing system with a minimum 25% jump between tiers. This ensures spacing values are clearly distinguishable and produces specific adjustments for components and sections.

Why does arbitrary whitespace make UI layouts feel messy and hard to scan?▼

Arbitrary whitespace makes UI layouts feel messy because related elements are not reliably grouped and unrelated sections do not separate cleanly. Inconsistent spacing values create ambiguous visual relationships, which forces users to work harder to parse the layout.