Skill: Eliminate Visual Clutter
Purpose
Remove unnecessary visual elements (borders, backgrounds, shadows, decorations) that don't serve functional purposes.
Type
Corrective + Evaluative
Input
- Design screenshot or description
- Element inventory (borders, shadows, backgrounds, separators)
Output
- Clutter assessment (what can be removed)
- Simplified design specification
- Pass/Fail rating
Transformation Performed
Identifies and removes decorative elements that don't communicate meaning, using whitespace and contrast instead.
Decision Criteria
PASS (Clean Design)
- Every visual element serves a functional purpose
- Whitespace used instead of borders to separate
- No decorative shadows or gradients without purpose
- Backgrounds used sparingly (not every card needs one)
- Minimal separator lines
FAIL (Cluttered Design)
- Borders on everything ("boxy" look)
- Shadows used decoratively
- Multiple separator lines between sections
- Background colors on every component
- Decorative elements that don't communicate meaning
Elements to Question
| Element |
Ask |
Often Remove? |
| Borders |
Does this need a border, or just space? |
Yes, use margin instead |
| Card backgrounds |
Does this need a box, or just whitespace? |
Often, let space define groups |
| Separators |
Does this need a line, or just more space? |
Usually, increase gap instead |
| Shadows |
Does this need depth, or is it decorative? |
Often, flatten |
| Background colors |
Is this color communicating something? |
If purely decorative, remove |
| Icons |
Does this icon add meaning? |
If decorative only, remove |
The Progression of Simplification
- Start with everything (borders, shadows, backgrounds)
- Remove borders → Use spacing instead
- Remove backgrounds → Use whitespace to group
- Remove separators → Increase space between sections
- Remove shadows → Keep only for elevation (modals, dropdowns)
- Add back only what's needed for hierarchy or clarity
Visual/UX Signals Used
- Whitespace: The most elegant separator
- Proximity: Groups without borders
- Typography: Hierarchy without decoration
- Contrast: Emphasis without extra elements
Common Failure Modes
| Failure |
Description |
Fix |
| Border-itis |
Every element has a box around it |
Remove 50%+ of borders, use space |
| Shadow Spam |
Shadows on static elements |
Reserve for hover states and modals |
| Separator Overload |
Lines between every section |
Remove half, double the space |
| Background Soup |
Every card has a gray background |
Use white with space, or subtle border |
| Icon Explosion |
Icons on every label and button |
Keep only when they add meaning |
| Gradient Gone Wild |
Decorative gradients everywhere |
Flatten or use one purposeful gradient |
Prerequisites
- Spacing system in place
- Visual hierarchy established
Dependencies
apply-consistent-spacing (whitespace replaces borders)establish-visual-hierarchy (contrast replaces decoration)
Refactoring UI References
- "Start with too much whitespace"
- "Don't use borders when you can use spacing"
- "Avoid boxy designs"
- "Less is more"
Example Assessment
Input: Card with: border (1px gray), background (#f5f5f5), shadow (sm), title with icon, separator line, content, separator line, footer with icon and text
Evaluation: FAIL (cluttered)
- Border + background + shadow = overkill
- Two separator lines unnecessary
- Icons may be decorative
Recommendation:
- Remove background (use white)
- Remove shadow (static card doesn't need elevation)
- Keep border OR use generous padding
- Remove separator lines, increase section padding
- Evaluate icons for meaning, remove if decorative
1---2name: eliminate-visual-clutter3description: Remove unnecessary borders, backgrounds, shadows, decorations4---56# Skill: Eliminate Visual Clutter78## Purpose9Remove unnecessary visual elements (borders, backgrounds, shadows, decorations) that don't serve functional purposes.1011## Type12Corrective + Evaluative1314## Input15- Design screenshot or description16- Element inventory (borders, shadows, backgrounds, separators)1718## Output19- Clutter assessment (what can be removed)20- Simplified design specification21- Pass/Fail rating2223## Transformation Performed24Identifies and removes decorative elements that don't communicate meaning, using whitespace and contrast instead.2526## Decision Criteria2728### PASS (Clean Design)29- Every visual element serves a functional purpose30- Whitespace used instead of borders to separate31- No decorative shadows or gradients without purpose32- Backgrounds used sparingly (not every card needs one)33- Minimal separator lines3435### FAIL (Cluttered Design)36- Borders on everything ("boxy" look)37- Shadows used decoratively38- Multiple separator lines between sections39- Background colors on every component40- Decorative elements that don't communicate meaning4142## Elements to Question4344| Element | Ask | Often Remove? |45|---------|-----|---------------|46| **Borders** | Does this need a border, or just space? | Yes, use margin instead |47| **Card backgrounds** | Does this need a box, or just whitespace? | Often, let space define groups |48| **Separators** | Does this need a line, or just more space? | Usually, increase gap instead |49| **Shadows** | Does this need depth, or is it decorative? | Often, flatten |50| **Background colors** | Is this color communicating something? | If purely decorative, remove |51| **Icons** | Does this icon add meaning? | If decorative only, remove |5253## The Progression of Simplification54551. **Start with everything** (borders, shadows, backgrounds)562. **Remove borders** → Use spacing instead573. **Remove backgrounds** → Use whitespace to group584. **Remove separators** → Increase space between sections595. **Remove shadows** → Keep only for elevation (modals, dropdowns)606. **Add back only what's needed** for hierarchy or clarity6162## Visual/UX Signals Used631. **Whitespace**: The most elegant separator642. **Proximity**: Groups without borders653. **Typography**: Hierarchy without decoration664. **Contrast**: Emphasis without extra elements6768## Common Failure Modes6970| Failure | Description | Fix |71|---------|-------------|-----|72| **Border-itis** | Every element has a box around it | Remove 50%+ of borders, use space |73| **Shadow Spam** | Shadows on static elements | Reserve for hover states and modals |74| **Separator Overload** | Lines between every section | Remove half, double the space |75| **Background Soup** | Every card has a gray background | Use white with space, or subtle border |76| **Icon Explosion** | Icons on every label and button | Keep only when they add meaning |77| **Gradient Gone Wild** | Decorative gradients everywhere | Flatten or use one purposeful gradient |7879## Prerequisites80- Spacing system in place81- Visual hierarchy established8283## Dependencies84- `apply-consistent-spacing` (whitespace replaces borders)85- `establish-visual-hierarchy` (contrast replaces decoration)8687## Refactoring UI References88- "Start with too much whitespace"89- "Don't use borders when you can use spacing"90- "Avoid boxy designs"91- "Less is more"9293## Example Assessment9495**Input:** Card with: border (1px gray), background (#f5f5f5), shadow (sm), title with icon, separator line, content, separator line, footer with icon and text9697**Evaluation:** FAIL (cluttered)98- Border + background + shadow = overkill99- Two separator lines unnecessary100- Icons may be decorative101102**Recommendation:**103- Remove background (use white)104- Remove shadow (static card doesn't need elevation)105- Keep border OR use generous padding106- Remove separator lines, increase section padding107- Evaluate icons for meaning, remove if decorative
gnurio