skills.rest
rohunvora
rohunvoraCOMMUNITY
Explore all skills by this author →
𝕏@rohunvoraGitHub

fix-spacing

Diagnose UI spacing issues using proximity, common region, and uniform connectedness laws.

5|Updated Dec 25, 2025
Search Tags:#ux#spacing#common-region#uniform-connectedness#proximity
One-click install
npx skills add https://github.com/rohunvora/my-claude-skills --skill fix-spacing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fix-spacing
Source: https://github.com/rohunvora/my-claude-skills/tree/main/.claude/skills/fix-spacing
Command: npx skills add https://github.com/rohunvora/my-claude-skills --skill fix-spacing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When cards feel like islands or groupings blur together, spacing and boundaries must be tuned to reveal meaningful structure and hierarchy.

Core Features & Use Cases

  • Proximity, Common Region, Uniform Connectedness: Apply spacing rules to create perceptual groups.
  • Diagnosis framework: Check proximity ratios, boundaries, and visual connections.
  • Practical fixes: Concrete spacing adjustments to improve rhythm and clarity.

Quick Start

Inspect the component group, compute proximity ratios, and propose padding/gap fixes to improve grouping.

Frequently Asked Questions about fix-spacing

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

FAQPage Schema
How do I fix spacing issues that make UI components feel disconnected?▼

Spacing affects visual grouping through proximity, common region, and uniform connectedness. This Skill diagnoses gaps and boundaries in cards and layouts, then recommends padding and gap adjustments to reveal meaningful hierarchy and improve perceived cohesion.

What's the best way to apply the Law of Proximity to card layouts?▼

The Law of Proximity uses spacing to group related elements. This Skill computes proximity ratios across your component groups, identifies misaligned gaps, and proposes concrete padding fixes to strengthen visual connections between related items.

How do I diagnose and fix poor visual grouping in a UI layout?▼

A spacing diagnosis framework evaluates proximity ratios, boundary definitions, and visual connectors across your layout. This Skill delivers structured findings and actionable spacing adjustments to clarify grouping and rhythm without redesigning components.

Can I use spacing rules to clarify boundaries between component groups?▼

Yes. The Law of Common Region uses boundaries and spacing to define group membership. This Skill applies this principle alongside proximity analysis to recommend gaps, padding, and visual cues that make group structure immediately legible.

What metrics does spacing analysis provide to validate layout improvements?▼

This Skill delivers proximity ratios, boundary definitions, and connector-cue metrics that quantify how well spacing supports visual grouping. These metrics let you track and validate improvements to hierarchy and perceptual organization.

When should I reconsider spacing in an existing UI design?▼

When cards feel isolated, groupings blur together, or hierarchy is unclear, spacing tuning is needed. This Skill identifies when proximity, boundaries, and connections are misaligned and proposes fixes to restore visual rhythm and meaning.

Related Skills

Explore More Design & Creative Skills→
artosetrovartosetrov

rad-spacing

Standardize Figma design spacing using 8px/4px increments and auto-layout padding and gaps.

Community
Intermediate
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak

layout

Analyze UI layouts and prescribe spacing scales, hierarchy, and grid recommendations.

Community
Intermediate
AkaraChenAkaraChen
270

arrange

Assess UI layouts for spacing, rhythm, hierarchy, and grid structure.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

indesign-conversion

Convert InDesign IDML and PDF files into typed React components and design tokens.

Official
Advanced