Claude Code Plugins

Community-maintained marketplace

Feedback

fix-spacing

@majiayu000/claude-skill-registry
6
0

This skill should be used when elements feel disconnected, cards float like islands, or groupings are unclear. Applies Law of Proximity, Law of Common Region, and Law of Uniform Connectedness.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name fix-spacing
description This skill should be used when elements feel disconnected, cards float like islands, or groupings are unclear. Applies Law of Proximity, Law of Common Region, and Law of Uniform Connectedness.

Fix Spacing Issues

Purpose

This skill diagnoses and fixes spacing issues that make interfaces feel disconnected or unclear. It applies three fundamental perceptual laws to create proper visual grouping and hierarchy through strategic use of whitespace, boundaries, and visual connections.

Applies these laws from lawsofux.com:

  • Law of Proximity: Objects near each other appear grouped
  • Law of Common Region: Elements sharing a boundary appear related
  • Law of Uniform Connectedness: Visually connected elements seem more related

When to Use

  • "Cards feel like islands"
  • "Everything is the same distance apart"
  • "Elements feel disconnected"
  • "Groupings are unclear"
  • "No visual rhythm"

The Laws

Law of Proximity

Objects that are near each other tend to be grouped together.

Application:

Space WITHIN groups < Space BETWEEN groups

Card padding < Gap between cards < Section gap

Violation test:

Proximity Ratio = internal spacing / external spacing
PASS: ratio < 1.0
FAIL: ratio ≥ 1.0

Law of Common Region

Elements tend to be perceived as groups if they share a clearly defined boundary.

Application:

  • Add backgrounds, borders, or containers to create regions
  • Don't rely on proximity alone for complex groupings
  • Nested regions show hierarchy

Law of Uniform Connectedness

Elements that are visually connected are perceived as more related than elements with no connection.

Application:

  • Lines, arrows, or shared colors connect related items
  • Timelines, flowcharts, breadcrumbs use this
  • Stronger than proximity for showing relationships

Diagnosis

For each group of elements, check:

1. PROXIMITY: Is internal < external spacing?
2. REGION: Do related items share a boundary?
3. CONNECTION: Are sequential items visually linked?

Output Format

SPACING DIAGNOSIS

Law of Proximity:
WHERE: [component]
Ratio: [internal]px / [external]px = [X]
Violation: [Yes/No]
FIX: [change]

Law of Common Region:
WHERE: [component]
Issue: [missing boundary / competing regions]
FIX: [add container / adjust]

Law of Uniform Connectedness:
WHERE: [component]
Issue: [disconnected sequence]
FIX: [add connector]

Quick Reference

Spacing Tailwind Use for
4px gap-1, p-1 Tight inline elements
8px gap-2, p-2 Related items in a group
16px gap-4, p-4 Items within a card
24px gap-6, p-6 Cards in a grid
32px gap-8 Between sections
48-64px py-12/16 Major section breaks

Rule: Each level should be ~1.5-2x the previous.