SKILL.md

  1---
  2name: distill
  3description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused."
  4argument-hint: "[target]"
  5user-invocable: true
  6---
  7
  8Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
  9
 10## MANDATORY PREPARATION
 11
 12Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first.
 13
 14---
 15
 16## Assess Current State
 17
 18Analyze what makes the design feel complex or cluttered:
 19
 201. **Identify complexity sources**:
 21   - **Too many elements**: Competing buttons, redundant information, visual clutter
 22   - **Excessive variation**: Too many colors, fonts, sizes, styles without purpose
 23   - **Information overload**: Everything visible at once, no progressive disclosure
 24   - **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations
 25   - **Confusing hierarchy**: Unclear what matters most
 26   - **Feature creep**: Too many options, actions, or paths forward
 27
 282. **Find the essence**:
 29   - What's the primary user goal? (There should be ONE)
 30   - What's actually necessary vs nice-to-have?
 31   - What can be removed, hidden, or combined?
 32   - What's the 20% that delivers 80% of value?
 33
 34If any of these are unclear from the codebase, {{ask_instruction}}
 35
 36**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.
 37
 38## Plan Simplification
 39
 40Create a ruthless editing strategy:
 41
 42- **Core purpose**: What's the ONE thing this should accomplish?
 43- **Essential elements**: What's truly necessary to achieve that purpose?
 44- **Progressive disclosure**: What can be hidden until needed?
 45- **Consolidation opportunities**: What can be combined or integrated?
 46
 47**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
 48
 49## Simplify the Design
 50
 51Systematically remove complexity across these dimensions:
 52
 53### Information Architecture
 54- **Reduce scope**: Remove secondary actions, optional features, redundant information
 55- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows)
 56- **Combine related actions**: Merge similar buttons, consolidate forms, group related content
 57- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden
 58- **Remove redundancy**: If it's said elsewhere, don't repeat it here
 59
 60### Visual Simplification
 61- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
 62- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
 63- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
 64- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards
 65- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
 66- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
 67
 68### Layout Simplification
 69- **Linear flow**: Replace complex grids with simple vertical flow where possible
 70- **Remove sidebars**: Move secondary content inline or hide it
 71- **Full-width**: Use available space generously instead of complex multi-column layouts
 72- **Consistent alignment**: Pick left or center, stick with it
 73- **Generous white space**: Let content breathe, don't pack everything tight
 74
 75### Interaction Simplification
 76- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
 77- **Smart defaults**: Make common choices automatic, only ask when necessary
 78- **Inline actions**: Replace modal flows with inline editing where possible
 79- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
 80- **Clear CTAs**: ONE obvious next step, not five competing actions
 81
 82### Content Simplification
 83- **Shorter copy**: Cut every sentence in half, then do it again
 84- **Active voice**: "Save changes" not "Changes will be saved"
 85- **Remove jargon**: Plain language always wins
 86- **Scannable structure**: Short paragraphs, bullet points, clear headings
 87- **Essential information only**: Remove marketing fluff, legalese, hedging
 88- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
 89
 90### Code Simplification
 91- **Remove unused code**: Dead CSS, unused components, orphaned files
 92- **Flatten component trees**: Reduce nesting depth
 93- **Consolidate styles**: Merge similar styles, use utilities consistently
 94- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases?
 95
 96**NEVER**:
 97- Remove necessary functionality (simplicity ≠ feature-less)
 98- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
 99- Make things so simple they're unclear (mystery ≠ minimalism)
100- Remove information users need to make decisions
101- Eliminate hierarchy completely (some things should stand out)
102- Oversimplify complex domains (match complexity to actual task complexity)
103
104## Verify Simplification
105
106Ensure simplification improves usability:
107
108- **Faster task completion**: Can users accomplish goals more quickly?
109- **Reduced cognitive load**: Is it easier to understand what to do?
110- **Still complete**: Are all necessary features still accessible?
111- **Clearer hierarchy**: Is it obvious what matters most?
112- **Better performance**: Does simpler design load faster?
113
114## Document Removed Complexity
115
116If you removed features or options:
117- Document why they were removed
118- Consider if they need alternative access points
119- Note any user feedback to monitor
120
121Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."