# 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…

- **Type:** Skill
- **Install:** `agentstack add skill-educlopez-ui-craft-distill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [educlopez](https://agentstack.voostack.com/s/educlopez)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [educlopez](https://github.com/educlopez)
- **Source:** https://github.com/educlopez/ui-craft/tree/main/.codex/skills/distill
- **Website:** https://skills.smoothui.dev/

## Install

```sh
agentstack add skill-educlopez-ui-craft-distill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

**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 the target the user described 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:**

1. **Content** — walls of text → 2-3 sentences max per landing section. Vague testimonials → specific metrics or cut. "Features" lists with 12 items → pick the 4 that matter. Placeholder copy → real or removed.
2. **Structure** — identical card grids → asymmetric rows with real visuals. Three competing CTAs → one primary + one secondary. Breadcrumbs + title + subtitle + description + icon → pick the two that are load-bearing.
3. **Visuals** — decorative gradient blobs → gone. Background patterns that don't carry meaning → gone. Duplicate iconography → gone.
4. **Visual weight reduction** — if headings are shouting at weight 800 / 72px / tracking -0.04em, compress: 800 → 600, 72 → 56, -0.04 → -0.02. Don't remove hierarchy; tighten the range. Replace hard drop shadows with ambient + direct (`references/modern-css.md`) or 1px borders — never both. If every section is full-bleed and high-contrast, let some breathe.
5. **Code** — unused props, dead branches, commented-out blocks, `console.log`, TODO notes without tickets — gone.
6. **Anti-slop overlap** — if you see anything on the Anti-Slop Test (SKILL.md), cut it first.

**Overlapping commands:** for color overload (too many accents, decorative color), use `/colorize`. For motion noise, use `/animate` with `MOTION_INTENSITY ≤ 3`.

**Output**:
- Edit code directly.
- Report what was cut and why in a table:

| Cut | Why |
| --- | --- |

- End with a one-line **delta**: "Before: N sections / M components / X lines. After: …".

**Guardrail**: do not cut accessibility affordances (labels, focus styles, error text, reduced-motion fallbacks) — those always earn their space.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [educlopez](https://github.com/educlopez)
- **Source:** [educlopez/ui-craft](https://github.com/educlopez/ui-craft)
- **License:** MIT
- **Homepage:** https://skills.smoothui.dev/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-educlopez-ui-craft-distill
- Seller: https://agentstack.voostack.com/s/educlopez
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.