---
name: distill
description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.
user-invokable: true
args:
  - name: target
    description: The feature or component to distill (optional)
    required: false
author: "@firdausmntp"
---

## Intent Primacy

Read the user's request before applying this command's defaults.

1. **Exact target**: Identify the specific feature, file, or area named. If none is named, ask before acting broadly.
2. **Stated scope wins**: "/distill just the header" means only the header. Do not expand scope.
3. **User's choices bind you**: If the user specifies a framework, style, or approach, follow it even if this skill would suggest otherwise. Warn once, then comply.
4. **Proportional output**: A narrow request gets a targeted answer with only the relevant sections from this skill. A broad request gets the full protocol.
5. **No unrequested work**: Do not refactor, rename, add tests, or generate documentation the user did not ask for.
6. **Hard gates only for safety**: Accessibility AA floor and security checks override user intent. Aesthetic or stylistic preferences do not.
7. **Ask only when it matters**: Ambiguity on scope or destructive action (data loss, breaking change, deleting files) — ask once with specific options. Ambiguity on cosmetic defaults — state assumption and proceed. Never stack questions. Never ask what you can read yourself. STOP and call the `question` tool to clarify.

---

Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.

## MANDATORY PREPARATION

Use the frontend-design skill — 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 teach-impeccable first.

---

## Assess Current State

Analyze what makes the design feel complex or cluttered:

1. **Identify complexity sources**:
   - **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

2. **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, STOP and call the `question` tool to clarify.

**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.

## Plan Simplification

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.

## Simplify the Design

Systematically remove complexity across these dimensions:

### Information Architecture
- **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

### Visual Simplification
- **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

### Layout Simplification
- **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

### Interaction Simplification
- **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 signup be one step instead of three? Can checkout be simplified?
- **Clear CTAs**: ONE obvious next step, not five competing actions

### Content Simplification
- **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

### Code Simplification
- **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?

**NEVER**:
- 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)

## Verify Simplification

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?

## Document Removed Complexity

If you removed features or options:
- Document why they were removed
- Consider if they need alternative access points
- Note any user feedback to monitor

## Before / After

Distillation is subtraction with intent. These examples show the same underlying content, first cluttered then reduced to what actually matters.

### 1. Cluttered card → stripped card

A card can die from generosity. Six elements competing for attention land as noise; one title plus the single action the user came for lands as clarity.

```tsx
// before — icon + title + 3 badges + description + 2 buttons + meta
<article className="rounded-2xl border bg-white p-6 shadow-lg">
  <div className="flex items-center gap-3 mb-4">
    <div className="p-2 bg-violet-100 rounded-lg">
      <SparkleIcon className="w-5 h-5 text-violet-600" />
    </div>
    <h3 className="text-xl font-bold">Weekly digest</h3>
    <span className="px-2 py-0.5 rounded bg-green-100 text-green-700 text-xs">New</span>
    <span className="px-2 py-0.5 rounded bg-blue-100 text-blue-700 text-xs">Beta</span>
    <span className="px-2 py-0.5 rounded bg-amber-100 text-amber-700 text-xs">Pro</span>
  </div>
  <p className="text-gray-600 mb-4">A curated summary of the week's activity, trends, and highlights from across your workspace, delivered every Monday morning.</p>
  <div className="flex items-center justify-between">
    <div className="text-xs text-gray-400">Updated 3h ago · 1.2k subscribers · v2.1.0</div>
    <div className="flex gap-2">
      <button className="px-3 py-1.5 border rounded">Preview</button>
      <button className="px-3 py-1.5 bg-violet-600 text-white rounded">Subscribe</button>
    </div>
  </div>
</article>
```

```tsx
// after — title, one sentence of context, one action
<article className="p-6">
  <h3 className="text-heading-sm">Weekly digest</h3>
  <p className="text-body-muted mt-1">A Monday summary of your workspace.</p>
  <button className="mt-4 text-sm font-medium text-[--color-primary] hover:underline">
    Subscribe →
  </button>
  <p className="mt-3 text-xs text-[--color-fg-subtle]">New · Beta</p>
</article>
```

### 2. Eight-field form → progressive disclosure

Most sign-ups need an email and a password. Shove the rest behind a disclosure so the front door is frictionless.

```tsx
// before — eight fields visible at once, most optional
<form className="space-y-4">
  <input placeholder="Email" />
  <input placeholder="Password" type="password" />
  <input placeholder="Confirm password" type="password" />
  <input placeholder="Full name" />
  <input placeholder="Company (optional)" />
  <input placeholder="Job title (optional)" />
  <input placeholder="Referral code (optional)" />
  <select><option>How did you hear about us?</option></select>
  <button type="submit">Create account</button>
</form>
```

```tsx
// after — two required fields, rest tucked under a disclosure
<form className="space-y-4">
  <input placeholder="Work email" required />
  <input placeholder="Password" type="password" required />

  <details className="text-sm">
    <summary className="cursor-pointer text-[--color-fg-subtle] hover:text-[--color-fg]">
      Add more details (optional)
    </summary>
    <div className="mt-3 space-y-3">
      <input placeholder="Full name" />
      <input placeholder="Company" />
      <input placeholder="Referral code" />
    </div>
  </details>

  <button type="submit" className="w-full">Create account</button>
</form>
```

### 3. Six-widget dashboard → one hero + two supporting

When everything is a KPI, nothing is. Promote the metric the user actually opens the page for.

```tsx
// before — six widgets, no hierarchy, all equal weight
<div className="grid grid-cols-3 gap-4">
  <Card><Stat label="Revenue" value="$48.2k" /></Card>
  <Card><Stat label="Users"   value="12,840" /></Card>
  <Card><Stat label="Churn"   value="2.1%"   /></Card>
  <Card><Stat label="Sessions" value="91,210" /></Card>
  <Card><Stat label="Avg. order" value="$37.18" /></Card>
  <Card><Stat label="NPS"     value="58"     /></Card>
</div>
```

```tsx
// after — one hero metric, two supporting, everything else on a secondary view
<section>
  <div className="mb-10">
    <p className="text-body-muted">Revenue this month</p>
    <p className="text-display tabular-nums">$48,204</p>
    <p className="text-sm text-[--color-success]">↑ 12% vs last month</p>
  </div>

  <div className="grid grid-cols-2 gap-6 max-w-md">
    <Stat label="Active users" value="12,840" trend="+4%" />
    <Stat label="Churn"        value="2.1%"   trend="-0.3%" />
  </div>

  <a href="/metrics" className="mt-8 inline-block text-sm text-[--color-primary]">
    See all metrics →
  </a>
</section>
```

### 4. Decision — remove vs hide behind progressive disclosure

Not everything that clutters a page deserves the axe. Use this rule to decide:

```
REMOVE when:
  - The element does not serve the page's primary job
  - Data is visible elsewhere in the product
  - The feature is unused (check analytics before deleting)
  - It is marketing fluff on a task-oriented screen

HIDE (progressive disclosure) when:
  - Power users need it but new users do not
  - It is a secondary workflow, not the primary one
  - It is a destructive or irreversible action (out of sight, one click away)
  - It is configuration or detail that matters only in specific moments

KEEP when:
  - It is the primary action or the core content
  - Removing it forces a navigation that breaks flow
  - It provides orientation the user needs to trust the page
```

**Test**: squint at the screen. If you cannot name the one thing it is for in three seconds, you have not distilled — you have decorated.

---

Remember: 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."