Skip to content

From the author

Turn a real, rendered UI component (button, input, switch, card, menu, dialog, any React/Vue/HTML component) into a live, interactive exploded spec sheet. The component is pulled apart in isometric into its paint layers (elevation, surface, stroke, inner surfaces, content, focus ring), every state (hover, focus, pressed, disabled, invalid, on/off) can be switched, and every measurement (padding, radius, gap, type, shadow, ring) plus the design token the author actually wrote is read from the browser, never typed. Use this whenever someone wants component documentation, a design-system or Storybook page, a "spec sheet", redlines, an anatomy or breakdown of a component, an exploded or layered view of UI, a visual handoff doc, or an interactive explainer of how a component is built, even if they never say "exploded". Works framework-free (one script and one stylesheet) and in React/Next.js through a wrapper component.

Install

npx skills add diip3sh/exploded --skill exploded -a claude-code

Installs to .claude/skills/exploded/ · Each command fetches the skill straight from GitHub with the open skills CLI.

Download .zip

Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.

Want your agent to suggest skills while you type? See how to use skills from your IDE.

Safety checks on SKILL.md

No warnings.

Why 82

Security100
Provenance61
Maintenance100
Licence100
Adoption31

aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.

Similar skills

Closest to this one by what they do and when they are used.

Ratings & reviews

—

no reviews

Tried this skill? Rate it to help others. Sign in

    Discussion

    Join the discussion. Sign in