Exploded · take a real UI component apart

A skill for coding agents. Name a component and your agent renders it, then pulls it apart into its paint layers. Each figure below is the real component, cloned once per paint layer with the browser's own computed styles. Nothing is redrawn and every number is read from layout.

npx skills add diip3sh/exploded

01 · Button

02 · Text field

03 · Switch

04 · Card

Install

npx skills add diip3sh/exploded

What you install is one folder: the skill, one script and one stylesheet. There is no npm install, and Node is only needed for the audit. Or clone it:

git clone https://github.com/diip3sh/exploded ~/.claude/skills/exploded

How to use it

/exploded document our Button, all states, for the Next.js docs

/exploded spec sheet for the email field and the switch

Restart your agent after installing, then type the command with the component you want.
You don't need the command. Ask for component docs, a spec sheet, redlines or an anatomy diagram and the skill is picked up on its own.
Out comes a page like this one: the live component beside its figure. It works framework-free, and in React or Next.js through a wrapper.

How it works

01Size it. One component is a figure, a set of variants is a sheet. It says which before it starts.
02Find the truth. It reads the component's source for its real states and where its tokens live.
03Take it apart. Every number comes from getComputedStyle, every token from the CSS rule you wrote.
04Audit. Every paint lands on exactly one layer, and every layer lays out within 0.5px of the live component, in every state.

Keys

1–9: Switch state
↑↓: Step through the layers
T: Show the tokens behind every value
E: Pull apart or put together
←→: Turn the stack, or drag it
Esc: Reset