| 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.
