distill

Name: distill
Author: educlopez

92installs8forks

How to install distill?

educlopez/ui-craft/distill

$npx -y skills add educlopez/ui-craft --skill distill

Installs into the current project.

Summary

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 fee

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	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.
4
5	Distill the UI at the target the user described to its essence. Load the `ui-craft` skill.
6
7	The test for every section, component, prop, and word:
8
9	> Does this answer a question the user is asking or drive an action they need to take? If not — cut it.
10
11	Knob gating (CRAFT_LEVEL):
12	- `≤ 4` → be more aggressive with cuts; strip anything that doesn't directly drive action.
13	- `5-7` → standard cuts per the test below.
14	- `8+` → preserve signature details even if they don't directly drive action — the one memorable element that makes this feel designed stays.
15
16	Apply ruthlessly:
17
18	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.
19	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.
20	3. Visuals — decorative gradient blobs → gone. Background patterns that don't carry meaning → gone. Duplicate iconography → gone.
21	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.
22	5. Code — unused props, dead branches, commented-out blocks, `console.log`, TODO notes without tickets — gone.
23	6. Anti-slop overlap — if you see anything on the Anti-Slop Test (SKILL.md), cut it first.
24
25	Overlapping commands: for color overload (too many accents, decorative color), use `/colorize`. For motion noise, use `/animate` with `MOTION_INTENSITY ≤ 3`.
26
27	Output:
28	- Edit code directly.
29	- Report what was cut and why in a table:
30
31	\| Cut \| Why \|
32	\| --- \| --- \|
33
34	- End with a one-line delta: "Before: N sections / M components / X lines. After: …".
35
36	Guardrail: do not cut accessibility affordances (labels, focus styles, error text, reduced-motion fallbacks) — those always earn their space.

People who liked this also viewed

6 picks

Type

distill

92installs8forks

View on GitHub

How to install distill?

educlopez/ui-craft/distill

$npx -y skills add educlopez/ui-craft --skill distill

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	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.
4
5	Distill the UI at the target the user described to its essence. Load the `ui-craft` skill.
6
7	The test for every section, component, prop, and word:
8
9	> Does this answer a question the user is asking or drive an action they need to take? If not — cut it.
10
11	Knob gating (CRAFT_LEVEL):
12	- `≤ 4` → be more aggressive with cuts; strip anything that doesn't directly drive action.
13	- `5-7` → standard cuts per the test below.
14	- `8+` → preserve signature details even if they don't directly drive action — the one memorable element that makes this feel designed stays.
15
16	Apply ruthlessly:
17
18	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.
19	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.
20	3. Visuals — decorative gradient blobs → gone. Background patterns that don't carry meaning → gone. Duplicate iconography → gone.
21	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.
22	5. Code — unused props, dead branches, commented-out blocks, `console.log`, TODO notes without tickets — gone.
23	6. Anti-slop overlap — if you see anything on the Anti-Slop Test (SKILL.md), cut it first.
24
25	Overlapping commands: for color overload (too many accents, decorative color), use `/colorize`. For motion noise, use `/animate` with `MOTION_INTENSITY ≤ 3`.
26
27	Output:
28	- Edit code directly.
29	- Report what was cut and why in a table:
30
31	\| Cut \| Why \|
32	\| --- \| --- \|
33
34	- End with a one-line delta: "Before: N sections / M components / X lines. After: …".
35
36	Guardrail: do not cut accessibility affordances (labels, focus styles, error text, reduced-motion fallbacks) — those always earn their space.

People who liked this also viewed

6 picks

Type