distill_skill

Overview

This skill strips designs to their essence by removing unnecessary complexity and revealing clear, focused interfaces. It helps teams make interfaces simpler, faster, and more usable while preserving necessary functionality and accessibility. Follow the required context protocol before making changes.

How this skill works

First, run the Context Gathering Protocol from the frontend-design skill; if no design context exists, run teach-impeccable. Then the skill analyzes current UI, information architecture, visuals, layout, interactions, content, and code to locate sources of complexity. It produces a ruthless editing plan that preserves the core user goal and progressively discloses secondary functionality.

When to use it

• When users struggle to find the primary action or complete core tasks
• Before major redesigns to reduce scope and focus on essentials
• When a product has feature creep, many variants, or visual chaos
• To improve performance and reduce code/asset bloat
• When onboarding metrics or task completion times are poor

Best practices

• Always run the Context Gathering Protocol first; clarify the single primary user goal
• Say no to good ideas—prioritize the 20% that delivers 80% of value
• Use progressive disclosure for secondary features instead of permanent visibility
• Limit palette, typography, and spacing to a single system with 1–2 accent colors
• Document removed items and rationale; provide alternative access if needed

Example use cases

• Simplify a crowded dashboard by reducing actions to one primary CTA and grouping others into an overflow
• Reduce onboarding steps from three to one by applying smart defaults and inline inputs
• Trim a component library: merge similar variants and remove unused CSS
• Turn a multi-column product page into a clear vertical flow with progressive details
• Revise copy across an app to be short, active, and scannable