Updated 3d ago
by diip3sh
exploded
Take a real UI component apart. A Claude Code skill + runtime that explodes a live component into paint layers, states and tokens. Nothing is redrawn, no number is typed.
45 GitHub stars (45)
+45 in 4 days
| Period | New stars |
|---|---|
| Oct 15 | +8 |
| Oct 16 | +1 |
- 1 skill (1 skills found in its SKILL.md files)
- 0 forks (0 forks)
- 3d ago last update (Last updated 3d ago)
Install
Skills CLI
npx skills add diip3sh/exploded
Asks which agents to install it for. Add -g to install it for every project.
Claude Code
git clone https://github.com/diip3sh/explodedcp -r "exploded" ~/.claude/skills/exploded
Copies the exploded skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project).
Plugin
/plugin marketplace add diip3sh/exploded
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
exploded
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,…
SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.