Exploded skill
A Claude Code skill that pulls a live UI component apart into isometric paint layers with measurements, tokens and states.
- 58 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill renders a component in a browser and reads its styles without changing project code.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/explodedDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill renders a component in a browser and reads its styles without changing project code.
This is third-party code. Review the repository files before installing.
What it does
Exploded takes a named UI component, renders it and pulls it apart isometrically into layers: elevation, surface, stroke, inner surfaces, content and focus ring. States switch: hover, focus, pressed, disabled, invalid, on and off, or your own. The `:hover`, `:focus` and `:active` pseudo-classes are forced by rewriting CSS rules, so no pointer is needed. The project rule: nothing is redrawn and no number is typed by hand. Every layer is a clone of the live component with the browser's computed styles, numbers come from `getComputedStyle` and geometry, and token names come from the CSS rules the author actually wrote. Pressing `T` shows values as tokens such as `--radius-md`, while hard-coded values stay raw so drift is visible. A built-in audit confirms that every paint lands on exactly one layer and that a copy differs from the live component by no more than 0.5 pixels. Install with `npx skills add diip3sh/exploded`.
Who it is for. Designers and front-end developers documenting design system components and checking the spec against real code.
Good fit when
- Documentation needs a button diagram with all states and measurements.
- The spec drifted from the code and values should be taken from the live component.
- You want to see which tokens an input really uses and which values are hard-coded.
- You need a component blueprint with padding, radii and shadows to hand to a designer.
Not a fit when
- You need a Figma mockup rather than a page from working code.
- The component is not in a browser: the skill works only with live markup.
- You expect a ready static image without running a page.
Example request
Use exploded to document our Button with all states for the Next.js docs.Limitations
The skill works with components that render in a browser: tokens are read from CSS rules the author wrote, and values set outside CSS stay as numbers. Light paint such as white text gets a backing in the colour of the real surface beneath it. It needs an environment that runs a page and gives DOM access. License: MIT. The last commit was on 13 October 2026, and the repository is small, with only `SKILL.md` and a `runtime` directory. For standalone embedding use `Exploded.mount()` from `runtime/exploded.js`.
How to disable. Delete the `~/.claude/skills/exploded` folder or remove it through the `skills` manager. The `runtime/exploded.css` and `runtime/exploded.js` files in your project are removed by hand.
FAQ
How do I invoke the skill?
With `/exploded` plus a description, for example `/exploded spec sheet for the email field and the switch, dark theme`. The agent also uses it on its own when component docs are needed.
Which layers does it show?
Elevation, surface, stroke, inner surfaces (chips, thumbs, avatars), content and focus ring. In the resting state the focus ring layer stays dashed and empty.
Where do the numbers and tokens come from?
Numbers come from `getComputedStyle`, layout boxes and text ranges, and token names from the author's CSS rules. That is why the spec cannot drift from what ships.
Can I use the runtime directly?
Yes: include `runtime/exploded.css` and `runtime/exploded.js`, then call `Exploded.mount(element, { target, title, states })`.
Which agents does it work with?
With Claude Code, Cursor, Codex and any agent that reads skills.
Discussion
No questions or reviews yet.
Related
SkillsA Claude skill that turns the name of an object into an isometric drawing in one HTML file with working buttons
A Claude Code plugin and skill marketplace for 3D, animation and modern web: Three.js, GSAP, React Three Fiber, Babylon.js
A Claude skill that turns sites, images and Figma files into a design system: Markdown, DTCG tokens and element rebuild prompts
A kit of skills, tokens and rules that turns Claude into a design architect: DTCG tokens, components, accessibility and objective quality gates
A skill that builds Framer components with Three.js, WebGL and GSAP: 3D, shaders and scroll animation in a single TSX file.
Claude Code skill for pixel art: sprites, animations and effects built from a reference and checked frame by frame
README in short
A skill and runtime that split a component into layers with live measurements. States switch without a pointer, tokens come from author CSS and an audit checks a copy against the original.