Reduces UI clutter by removing elements that don't drive core user actions.
Install
mkdir -p .claude/skills/distill-educlopez && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12990" && unzip -o skill.zip -d .claude/skills/distill-educlopez && rm skill.zipInstalls to .claude/skills/distill-educlopez
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Cut content to 2-3 sentences max per landing section
- →Reduce competing CTAs to one primary and one secondary
- →Remove decorative gradient blobs and background patterns
- →Compress headings by reducing font weight, size, and tracking
- →Remove unused props, dead branches, and commented-out code
- →Report what was cut and why in a table
How it works
The skill applies a reduction pass to UI elements, content, structure, visuals, and code based on a CRAFT_LEVEL, cutting anything that does not answer a user question or drive an action.
Inputs & outputs
When to use distill
- →Simplify busy UI
- →Remove design noise
- →Reduce landing page text
- →Optimize CTA density
About this skill
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:
- 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.
- 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.
- Visuals — decorative gradient blobs → gone. Background patterns that don't carry meaning → gone. Duplicate iconography → gone.
- 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. - Code — unused props, dead branches, commented-out blocks,
console.log, TODO notes without tickets — gone. - 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.
Next step: /polish — what survived the cut deserves the details (rung 1).
When not to use it
- →When the user asks to preserve signature details for design
- →When the task involves color overload, use /colorize
- →When the task involves motion noise, use /animate
Limitations
- →Does not cut accessibility affordances like labels, focus styles, error text, or reduced-motion fallbacks
How it compares
This skill systematically applies a defined test to every UI element and reports specific changes, unlike a manual approach that might rely on subjective judgment.
Compared to similar skills
distill side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| distill (this skill) | 0 | 2mo | No flags | Intermediate |
| jobs-review | 0 | 4mo | No flags | Beginner |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| penpot-uiux-design | 27 | 6mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by educlopez
View all by educlopez →You might also like
jobs-review
jinyuanlu
|
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
interactive-portfolio
davila7
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.
paywall-upgrade-cro
davila7
When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see page-cro) — this skill focuses on in-product upgrade moments where the user has already experienced value.