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, 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 Story
Install
npx skills add diip3sh/exploded --skill explodedgit clone --depth 1 https://github.com/diip3sh/exploded.git /tmp/exploded
mkdir -p ~/.claude/skills
cp -r /tmp/exploded/. ~/.claude/skills/explodedPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Exploded This skill makes figures that take a real component apart. It floats over a cutting mat as a stack of glass sheets. Each sheet carries one kind of paint: the shadow it casts, its fill, its stroke, the chips and thumbs inside it, its text and icons, and its focus ring. Hover the figure and the stack opens. Hover a sheet and its measurements are printed on it in redline. Press 1–5 and the component changes state, and the sheets change with it. The real component sits beside the figure, live, and hovering or focusing it drives the figure. One complete example ships with the skill: `examples/gallery/index.html`, which has four figures (a primary button with an icon and a shortcut chip, an email field, a switch and a review card). Open it before you start. Serve the folder (`python3 -m http.server`) or open the file directly. ## The one idea that matters **Nothing is redrawn, and no number is typed.** Every sheet is the real component, cloned with the browser's own computed styles, with every paint that belongs to another sheet made transparent. Every number on a sheet or in the readout comes from `getComputedStyle`, layout boxes and text ranges. Every token name comes from the CSS rule the author actually wrote. A spec sheet fails in two ways: - **Mockup.** The component is redrawn as SVG shapes or boxes. It drifts from what ships on the first refactor, and nobody notices.
Details
- Skill name
exploded- Repository
- diip3sh/exploded
- License
- MIT
- Repo updated
- 13 October 2026
FAQ
What does the Exploded skill do?
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 Story
How do I install the Exploded skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add diip3sh/exploded --skill exploded. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Exploded popular?
It lives in diip3sh/exploded, which has 59 GitHub stars and 2 forks.
Related skills
Feel
61diip3sh/feel
Build UI interactions whose motion comes from a physical model instead of durations and easing curves. Turn a feel described in words ("a toggle that feels heavy", "a drawer with a magnetic snap", "a card you throw into a corner", "a knob with heavy detents", "a sticky slider") into a production component driven by mass, stiffness, damping and force fields (magnets, friction, walls), on a line, in a plane or around a dial, plus a test rig that plots position, velocity and the force field, overlays the model's prediction on the measured motion, and exports the same spring to Framer Motion, reac
Qiaomu Icon Generator
55joeseesun/qiaomu-icon-generator
Generate multiple app, favicon, or website icon candidates with either the local QM Icon Studio CLI or Codex built-in image generation with reference icons, then present a contact sheet so the user can choose. Use when building websites or apps and needing reusable icon options.
Website Audit
49appariciojunior/website-audit-skill
Comprehensive website content and UX audit. Use this skill whenever someone asks to review, audit, check, or improve a website, landing page, or web product. Triggers include: "audit my website", "review my site", "check my content", "is my website ready to launch", "what's wrong with my site", "content review", "UX review", "website feedback", "check for broken links", "check for lorem ipsum", "review my copy", or any request that involves evaluating an existing website's content quality, UX structure, copy, or readiness for launch. Also trigger when someone shares a URL and asks for feedback
Lecture Deck
49RinDig/lecture-deck-skill
Build a high-quality animated HTML lecture or workshop deck from a storyboard, in any theme. Use whenever someone asks for a slide deck, session deck, workshop slides, lecture screens, a run-of-show deck, or speaker notes for a talk, especially one delivered live (in a room or on Zoom) with breakouts, share-screen moments and handoffs. Produces one self-contained HTML file with keyboard navigation, speaker notes, overview, print, copy-to-clipboard prompts and a mode strip on every screen, plus PNG renders for checking. Ships with three themes and a kit for diagrams, animation, a recurring cast
Work with Design Systems
52natdexterra/work-with-design-systems
Inspect, build, or extend Figma design systems — and optionally sync them to code. Two modes in one skill: inspect mode (read-only audits with WCAG checks, component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured descriptions, validation, and optional export of tokens.css + AI rules to the user's codebase). Use when the user says 'audit my design system', 'check component quality', 'create design system', 'build DS in Figma', 'generate component library', 'add slots to my components', 'sync desi
Kunpeng Skill
55hufeng173/kunpeng-skill
跨智能体、本地优先的多源蒸馏与迁移工作流。用于收录或蒸馏代码仓库、网站、App、UI/交互、图片与品牌、视频、音频、文章、文档、书籍、课程及混合素材,形成带证据的可迁移画像、再生成规范、产品方案和本地方法库;也用于把画像应用到新主题或新 idea 并验收结果。
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.