educlopez/ui-craft-codex-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.
This is a copy. The original lives at educlopez/distill.
npx skills add https://github.com/educlopez/ui-craft --skill distill
<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
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).
Take educlopez/ui-craft-codex-distill from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.