npx skills add ...
npx skills add educlopez/ui-craft --skill distill
Reduction pass — cuts content, structure, visuals, and dead code that doesn't answer a user question or drive an action, respecting CRAFT_LEVEL. Use when the UI feels cluttered, has too many CTAs, walls of text, or decorative noise, or when the user says \"simplify this\" / \"it feels too busy\". Invoke when the user asks for distill on their UI, or mentions 'distill' alongside design / UI / frontend work.
npx skills add educlopez/ui-craft --skill distill
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Distill the UI at $ARGUMENTS to its essence. Load the ui-craft skill.
The test for every section, component, prop, and word:
Does this answer a question the user is asking or drive an action they need to take? If not — cut it.
Knob gating (CRAFT_LEVEL):
≤ 4 → be more aggressive with cuts; strip anything that doesn't directly drive action.5-7 → standard cuts per the test below.8+ → preserve signature details even if they don't directly drive action — the one memorable element that makes this feel designed stays.Apply ruthlessly:
references/modern-css.md) or 1px borders — never both. If every section is full-bleed and high-contrast, let some breathe.console.log, TODO notes without tickets — gone.Overlapping commands: for color overload (too many accents, decorative color), use /colorize. For motion noise, use /animate with MOTION_INTENSITY ≤ 3.
Output:
| Cut | Why |
|---|
Guardrail: do not cut accessibility affordances (labels, focus styles, error text, reduced-motion fallbacks) — those always earn their space.
Next step: /polish — what survived the cut deserves the details (rung 1).