Exploded

Exploded is a Claude Code skill and runtime that takes a real UI component apart. Name a component and it renders it, then pulls it apart in isometric into its paint layers—elevation, surface, stroke, inner surfaces, content, and focus ring—with every state switchable and every measurement and design token readable right off the layers. Nothing is redrawn and no number is typed: each layer is the live component cloned with its computed styles, each value comes from `getComputedStyle` and layout boxes, and each token name comes from the CSS rule the author wrote, so the spec sheet can't drift from what ships.

Build StackJavaScript, TypeScript, React, Next.js, CSS, Claude Code skills

Challenges

  • Splitting one live component into layers so each paint lands on exactly one layer without redrawing anything.

  • Showing :hover, :focus, and :active states side by side without a real pointer or keyboard.

  • Printing padding, radius, gap, and type redlines that stay legible at any zoom and never cover the glyphs they measure.

  • Surfacing the token an author actually used (--radius-md, --spacing × 2.5) instead of a resolved pixel value.

Solutions

  • Cloned the live node per layer with the browser's computed styles and made paint belonging to other layers transparent, backing light paint with its real surface colour.

  • Forced interactive states by rewriting the matching CSS rules, then combined every state into one stack so the focus ring waits, dashed, at rest.

  • Kept redline labels at a fixed on-screen size and positioned them around text ranges and layout boxes.

  • Traced each value back to its source rule and added an audit that checks every layer lays out within 0.5 px of the live component in every state.