distill

distill is a skill for Claude Code from HK-hub/AgentSkills. It costs 49 tokens per session (1,339 once invoked), scanned A, a copy of distill, MIT.

A design-simplification workflow that removes unnecessary elements, visual noise, and competing choices so an interface focuses on its main user goal.

In plain words
What is it for?
Use it to declutter a user interface, reduce visual variation, simplify navigation, hide secondary options, or improve hierarchy in an existing design.
Why use it?
It helps make cluttered or confusing interfaces easier to understand. The process separates essential parts from features and decoration that do not support the primary task.

Skill for Claude Code

Written for Claude Code: user-invocable in frontmatter.

Good fit Use it to declutter a user interface, reduce visual variation, simplify navigation, hide secondary options, or improve hierarchy in an existing design.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/hk-hub/agentskills/distill
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add HK-hub/AgentSkills --skill distill
Clone the repo
git clone --depth 1 https://github.com/HK-hub/AgentSkills

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for distill

README.md
[![agentmods](https://agentmods.dev/badge/skills/hk-hub/agentskills/distill/github.svg)](https://agentmods.dev/skills/hk-hub/agentskills/distill)
Your own site
<a href="https://agentmods.dev/skills/hk-hub/agentskills/distill"><img src="https://agentmods.dev/badge/skills/hk-hub/agentskills/distill/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for distill

Your own site · 80×15
<a href="https://agentmods.dev/skills/hk-hub/agentskills/distill"><img src="https://agentmods.dev/badge/skills/hk-hub/agentskills/distill.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 49 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,339 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 97% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00049 $0.01339
Opus 5 $0.00024 $0.00669
Sonnet 5 $0.00010 $0.00268
Haiku 4.5 $0.00005 $0.00134

Measured 6d ago against content hash dffb5ad02d3f, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

distill scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

97% identical to distill — 7 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

distill/SKILL.md · 121 lines

How it starts

The opening of the file, as written. The whole thing — 121 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.

MANDATORY PREPARATION

Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first.


Assess Current State

Analyze what makes the design feel complex or cluttered:

  1. Identify complexity sources:

    • Too many elements: Competing buttons, redundant information, visual clutter
    • Excessive variation: Too many colors, fonts, sizes, styles without purpose
    • Information overload: Everything visible at once, no progressive disclosure
    • Visual noise: Unnecessary borders, shadows, backgrounds, decorations
    • Confusing hierarchy: Unclear what matters most
    • Feature creep: Too many options, actions, or paths forward
  2. Find the essence:

    • What's the primary user goal? (There should be ONE)
    • What's actually necessary vs nice-to-have?
    • What can be removed, hidden, or combined?
    • What's the 20% that delivers 80% of value?

If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.

CRITICAL: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.

Plan Simplification

Create a ruthless editing strategy:

  • Core purpose: What's the ONE thing this should accomplish?
  • Essential elements: What's truly necessary to achieve that purpose?
  • Progressive disclosure: What can be hidden until needed?
  • Consolidation opportunities: What can be combined or integrated?

IMPORTANT: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.

Simplify the Design

Systematically remove complexity across these dimensions:

Information Architecture

  • Reduce scope: Remove secondary actions, optional features, redundant information
  • Progressive disclosure: Hide complexity behind clear entry points (accordions, modals, step-through flows)
  • Combine related actions: Merge similar buttons, consolidate forms, group related content
  • Clear hierarchy: ONE primary action, few secondary actions, everything else tertiary or hidden
  • Remove redundancy: If it's said elsewhere, don't repeat it here

Read the full file on GitHub · 121 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 6d ago First seen · 121 lines · 49 tokens per session scan A dffb5ad02d3f

Subscribe to this mod's changes

distill is a skill published in the GitHub repository HK-hub/AgentSkills (6 stars, last pushed 22d ago), licensed MIT. It adds 49 tokens to every session and 1,339 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 97% identical to distill, differing in 7 lines, and is treated as a copy.

Related

Other skills, from other repositories

visual-verdict

Structured visual QA verdict for screenshot-to-reference comparisons.

Yeachan-Heo/oh-my-claudecode · 13 tokens

interaction-skill

Layer A interaction-mechanics reference anchored to the beui.dev catalog. Stacks on any style skill whenever work adds or changes motion or interaction — micro-interactions, animated components, transitions, gestures, hover/press/state feedback, loading/success/error morphs, 'make it feel alive'. Mandates reading the…

code-yeongyu/oh-my-openagent · 104 tokens

layout-skill

Layer A layout-mechanics reference. Stacks on any style skill when the screen is an app shell, dashboard, settings, list-detail, mail/inbox, or any layout with fixed regions plus a scrolling body — or when a layout breaks under long, empty, or unbroken content. Owns spatial structure and scroll ownership; owns zero…

code-yeongyu/oh-my-openagent · 88 tokens

ui-design

Unify product UI design, frontend implementation, and verification. Use when asked to design, redesign, build, or fix a web, desktop, or mobile interface; a page, dashboard, form, component, design system, responsive layout, accessibility, interface animation, or editable hero/banner/infographic within a product…

AnastasiyaW/codex-claude-code-config · 97 tokens

frontend-design

A design guide for building polished web interfaces such as pages, dashboards, forms, navigation, and reusable UI components. It covers HTML, CSS, JavaScript, and common frontend frameworks.

AnastasiyaW/codex-claude-code-config · 264 tokens

frontend-philosophy

Visual & UI philosophy (The 5 Pillars of Intentional UI). Understand deeply to avoid "AI slop" and create distinctive, memorable interfaces.

kdcokenny/ocx · 36 tokens