Setting the file. One moment.
Distill · Impeccable · pbakaus/impeccable · Skills Docs
Strip a design to its essence. Remove anything that doesn’t earn its place: redundant elements, repeated information, decorative noise, cosmetic complexity.
Analyze what makes the design feel complex or cluttered:
Identify complexity sources :
ContentsBack to the top of the page
Too many elements : Competing buttons, redundant information, visual clutter
Excessive variation : Too many colors, fonts, sizes, styles without purpose
Information overload : Everything visible at once, no progressive disclosure
Visual noise : Unnecessary borders, shadows, backgrounds, decorations
Confusing hierarchy : Unclear what matters most
Feature creep : Too many options, actions, or paths forward
Find the essence :
What’s the primary user goal? (There should be ONE)
What’s actually necessary vs nice-to-have?
What can be removed, hidden, or combined?
What’s the 20% that delivers 80% of value?
If any of these are unclear from the codebase, do not guess. Ask the user directly to clarify what you cannot infer.
CRITICAL : Simplicity is not about removing features. It’s about removing obstacles between users and their goals. Every element should justify its existence.
Create a ruthless editing strategy:
Core purpose : What’s the ONE thing this should accomplish?
Essential elements : What’s truly necessary to achieve that purpose?
Progressive disclosure : What can be hidden until needed?
Consolidation opportunities : What can be combined or integrated?
IMPORTANT : Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
Systematically remove complexity across these dimensions:
Reduce scope : Remove secondary actions, optional features, redundant information
Progressive disclosure : Hide complexity behind clear entry points (accordions, modals, step-through flows)
Combine related actions : Merge similar buttons, consolidate forms, group related content
Clear hierarchy : ONE primary action, few secondary actions, everything else tertiary or hidden
Remove redundancy : If it’s said elsewhere, don’t repeat it here
Reduce color palette : Use 1-2 colors plus neutrals, not 5-7 colors
Limit typography : One font family, 3-4 sizes maximum, 2-3 weights
Remove decorations : Eliminate borders, shadows, backgrounds that don’t serve hierarchy or function
Flatten structure : Reduce nesting, remove unnecessary containers; never nest cards inside cards
Remove unnecessary cards : Cards aren’t needed for basic layout; use spacing and alignment instead
Consistent spacing : Use one spacing scale, remove arbitrary gaps
Linear flow : Replace complex grids with simple vertical flow where possible
Remove sidebars : Move secondary content inline or hide it
Full-width : Use available space generously instead of complex multi-column layouts
Consistent alignment : Pick left or center, stick with it
Generous white space : Let content breathe, don’t pack everything tight
Reduce choices : Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
Smart defaults : Make common choices automatic, only ask when necessary
Inline actions : Replace modal flows with inline editing where possible
Remove steps : Can the flow lose a step?
Clear next action : ONE obvious next action, not five competing ones
Shorter copy : Cut every sentence in half, then do it again
Active voice : “Save changes” not “Changes will be saved”
Remove jargon : Plain language always wins
Scannable structure : Short paragraphs, bullet points, clear headings
Essential information only : Remove marketing fluff, legalese, hedging
Remove redundant copy : No headers restating intros, no repeated explanations, say it once
Remove unused code : Dead CSS, unused components, orphaned files
Flatten component trees : Reduce nesting depth
Consolidate styles : Merge similar styles, use utilities consistently
Reduce variants : Does that component need 12 variations, or can 3 cover 90% of cases?
Remove necessary functionality (simplicity ≠ feature-less)
Sacrifice accessibility for simplicity (clear labels and ARIA still required)
Make things so simple they’re unclear (mystery ≠ minimalism)
Remove information users need to make decisions
Eliminate hierarchy completely (some things should stand out)
Oversimplify complex domains (match complexity to actual task complexity)
Ensure simplification improves usability:
Faster task completion : Can users accomplish goals more quickly?
Reduced cognitive load : Is it easier to understand what to do?
Still complete : Are all necessary features still accessible?
Clearer hierarchy : Is it obvious what matters most?
Better performance : Does simpler design load faster?
If you removed features or options:
Document why they were removed
Consider if they need alternative access points
Note any user feedback to monitor
When the cuts feel right, hand off to /impeccable polish for the final pass. As Antoine de Saint-Exupéry put it: “Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.”
reference/distill.md