Menu
Use proximity and spacing to show relationships
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades
Use systematic spacing with 25% minimum jumps, start with excess whitespace
Create clear primary/secondary/tertiary action distinctions
Remove unnecessary borders, backgrounds, shadows, decorations
| name | group-related-elements |
| description | Use proximity and spacing to show relationships |
| domain | ui-design |
| skill-type | generative |
| version | 1.0.0 |
| author | refactoring-ui-expert |
| prerequisites | [] |
| dependencies | ["04-apply-consistent-spacing"] |
Use proximity and spacing to visually group related elements together and separate unrelated groups.
Generative + Evaluative
Adjusts spacing so elements within a group are closer together than elements in different groups, using the Gestalt principle of proximity.
Elements that are close together are perceived as more related than elements that are farther apart.
Within component (label + input): 4-8px
Between related components: 16-24px
Between sections: 32-64px
Between major page areas: 64-96px
| Pattern | Structure | Spacing |
|---|---|---|
| Form field | Label → Input | 4-8px between, 16-24px after |
| Card | Header → Content → Footer | 16-24px internal padding |
| List items | Item 1 / Item 2 / Item 3 | 8-12px between items |
| Button group | Primary + Secondary | 8-12px between |
| Sections | Section A (gap) Section B | 48-64px between |
| Failure | Description | Fix |
|---|---|---|
| The Great Divide | Equal spacing everywhere | Tighten within groups, expand between groups |
| Label Drift | Labels 20px+ from inputs | Reduce to 4-8px |
| Section Smush | Sections barely separated | Add 48px+ between major sections |
| Border Dependency | Boxes around everything | Use space instead of borders |
| Card Clump | Cards touching each other | Add 16-24px gap between cards |
apply-consistent-spacing (uses spacing scale)Input: Form with: Title (24px margin), Label (8px margin), Input, Label (8px), Input, Section header (16px margin), Label (8px), Input
Evaluation: PARTIAL
Recommendation: