The distill skill helps you remove unnecessary complexity from designs, revealing essential elements and creating clarity through ruthless simplification. Great design is simple, powerful, and clean.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/pbakaus/impeccable/llms.txt
Use this file to discover all available pages before exploring further.
Purpose
Distill focuses on systematic simplification across multiple dimensions:- Information architecture and content hierarchy
- Visual design and styling
- Layout and structure
- Interaction patterns and user flows
- Code organization and complexity
Parameters
The feature or component to distill. When omitted, analyzes the entire project for simplification opportunities.
When to Use
Use the distill skill when:- Designs feel cluttered or overwhelming
- Too many competing elements demand attention
- Users report confusion or difficulty finding features
- Interface has accumulated complexity over time
- You need to improve focus and clarity
- Visual noise distracts from core functionality
Workflow
1. Context Gathering (Mandatory)
Before simplifying, the skill gathers critical context:- Target audience: Who uses this product?
- Use cases: What are users trying to accomplish?
- Essential vs nice-to-have: What’s truly necessary?
2. Assess Current State
Analyzes complexity sources:- Too many elements competing for attention
- Excessive variation in colors, fonts, sizes without purpose
- Information overload with no progressive disclosure
- Visual noise from unnecessary decorations
- Confusing hierarchy
- Feature creep
- What’s the primary user goal?
- What’s necessary vs nice-to-have?
- What can be removed, hidden, or combined?
- What’s the 20% delivering 80% of value?
3. Plan Simplification
Creates a ruthless editing strategy:- Core purpose (the ONE thing this accomplishes)
- Essential elements (truly necessary items)
- Progressive disclosure opportunities
- Consolidation possibilities
4. Simplify Systematically
Information Architecture
- Reduce scope by removing secondary actions and redundant information
- Hide complexity behind clear entry points (accordions, modals, step-through flows)
- Combine related actions and consolidate forms
- Establish clear hierarchy: ONE primary action, few secondary actions
- Remove all redundancy
Visual Simplification
- Reduce color palette to 1-2 colors plus neutrals
- Limit typography to one font family, 3-4 sizes, 2-3 weights
- Remove decorations that don’t serve hierarchy or function
- Flatten structure and reduce nesting
- Remove unnecessary cards (use spacing and alignment instead)
- Apply consistent spacing scale
Layout Simplification
- Replace complex grids with simple vertical flow where possible
- Move secondary content inline or hide it (remove sidebars)
- Use available space generously with full-width layouts
- Maintain consistent alignment
- Add generous white space
Interaction Simplification
- Reduce choices (paradox of choice is real)
- Implement smart defaults
- Use inline actions instead of modal flows
- Remove unnecessary steps
- Provide ONE clear CTA, not five competing actions
Content Simplification
- Cut sentences in half, then do it again
- Use active voice: “Save changes” not “Changes will be saved”
- Replace jargon with plain language
- Create scannable structure with short paragraphs and bullet points
- Remove marketing fluff and redundant copy
Code Simplification
- Remove unused code (dead CSS, unused components)
- Flatten component trees
- Consolidate similar styles
- Reduce variants (does that component need 12 variations or will 3 suffice?)
5. Verify Simplification
Ensures improvements actually help:- Faster task completion
- Reduced cognitive load
- Still complete (all necessary features accessible)
- Clearer hierarchy
- Better performance
Key Principles
Never:- Remove necessary functionality
- Sacrifice accessibility for simplicity
- Make things so simple they’re unclear
- Remove information users need to make decisions
- Eliminate hierarchy completely
- Oversimplify complex domains
Usage Examples
Example 1: Simplify a Dashboard
- Analyze current dashboard complexity
- Identify competing metrics and visual noise
- Propose consolidation of related data
- Suggest progressive disclosure for secondary metrics
- Simplify color usage and reduce decorative elements
- Implement changes and verify improved clarity
Example 2: General Simplification
- Surveys the entire codebase for complexity
- Identifies patterns of over-complication
- Prioritizes highest-impact simplification opportunities
- Systematically reduces complexity across the project
Integration
The distill skill automatically loads the frontend-design skill to access design principles and anti-patterns before proceeding with simplification work.Philosophy
“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.” — Antoine de Saint-ExupérySimplification requires:
- Confidence: Knowing what to keep
- Courage: Removing the rest
- Discipline: Saying no to good ideas to make room for great execution
