Strip UI to its essentials. Remove unnecessary complexity, redundant wrappers, excessive nesting, and over-engineered components. Use when asked to "simplify this", "strip it down", "make it cleaner", or when UI feels bloated.
Simplifies UI code by removing redundant wrappers, excessive nesting, and visual clutter while preserving core functionality.
/plugin marketplace add howells/arc/plugin install arc@howellsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
<tool_restrictions>
EnterPlanMode — BANNED. Execute phases below directly.ExitPlanMode — BANNED. You are never in plan mode.
</tool_restrictions>Strip UI to its essence. "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
Announce at start: "I'm using the distill skill to simplify this UI."
<important> **This skill is user-interactive. Do NOT spawn agents.** Simplification requires judgment about what matters — it's collaborative, not automated.Never sacrifice:
Simplicity means removing obstacles between users and their goals — not eliminating features or clarity. </important>
<required_reading> Read these using the Read tool:
${CLAUDE_PLUGIN_ROOT}/rules/interface/spacing.md — Spacing and hierarchy (cards are not required)${CLAUDE_PLUGIN_ROOT}/rules/interface/design.md — Visual principles${CLAUDE_PLUGIN_ROOT}/references/design-philosophy.md — "Less but better" principles
</required_reading>Ask the user:
Question: "What is the ONE thing this component/page should accomplish?"
Header: "Core purpose"
Options:
1. "Let me explain" — User describes the core purpose
2. "Infer from code" — You analyze and propose the core purpose
Read all files for the target component/page. Look for:
flex flex-col items-start when items-start is the defaulthidden md:block chains that suggest wrong base statep-[17px] instead of scale valuestext-gray-900 dark:text-gray-100 instead of CSS variable flippingPresent findings as a distillation plan:
## Distillation Plan
### Remove (no value lost)
1. [Wrapper div at line X — adds no styling or semantics]
2. [Card container — spacing alone creates grouping]
### Simplify (same value, less code)
1. [15 Tailwind classes → 8 by removing redundancies]
2. [3-level nesting → flat with gap]
### Consolidate (multiple things → one)
1. [3 similar buttons → 1 with variant prop]
2. [Repeated icon+text pattern → shared component]
### Preserve (looks removable but isn't)
1. [Wrapper needed for overflow handling]
2. [Extra div required for animation transform-origin]
Ask: "Does this distillation plan look right? Anything I should preserve?"
Apply changes in this order (safest first):
<!-- Before: unnecessary wrapper -->
<div>
<div class="flex gap-4">
<div class="p-4">Content</div>
</div>
</div>
<!-- After: flat -->
<div class="flex gap-4">
<div class="p-4">Content</div>
</div>
<!-- Before: card for grouping -->
<div class="rounded-lg border p-4 shadow-sm">
<h3>Title</h3>
<p>Description</p>
</div>
<!-- After: spacing creates grouping -->
<div class="space-y-2">
<h3 class="font-semibold">Title</h3>
<p class="text-gray-600">Description</p>
</div>
Remove classes that are defaults or redundant:
flex-row (default for flex)items-stretch (default for flex)static (default position)visible (default)text-left (default for LTR)Use gap-* instead of nested containers with margins.
Ask for each decorative element: "Would the user notice if this was removed?" If no, remove it.
After each batch of changes:
Ask: "The simplified version is ready. Does it still feel complete?"
<arc_log>
After completing this skill, append to the activity log.
See: ${CLAUDE_PLUGIN_ROOT}/references/arc-log.md
Entry: /arc:distill — [Component/page] simplified ([elements removed, classes reduced])
</arc_log>
<success_criteria> Distill is complete when:
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.