exploded
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.
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
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.
- exploded-viewMoh4696/open-3d-skillsBuilds interactive 3D explainers of how a machine or product works, in three.js, with a staged exploded view driven by a slider or scroll, x-ray shells, a section cut through the casing, labels pinned to parts with leader lines that never cover the model, and hover or click to pick parts. Works on code-built models and loaded GLB files. Use for "show how it works", teardown or cutaway pages, product anatomy, engine, motor, gearbox, camera, phone or vehicle internals, technical education pages, or turning a 2D cutaway drawing into an interactive 3D one.Engineering★ 206
- design-codeplugin87/ux-ui-agent-skillsGenerate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS). Use when the user wants working UI code for a component or screen in a specific stack.Design★ 3.1K
- design-componentplugin87/ux-ui-agent-skillsDesign a UI component spec to the house quality bar (anatomy, variants, sizes, the 8 states, token mapping, and accessibility). Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.Design★ 3.1K
- ui-ux-pro-maxmajiayu000/spellbookUse when planning, building, designing, code review, refactor, fixing, improving, optimizing, enhancing, or checking UI/UX work. Covers product patterns, landing pages, chart choices, visual styles, palettes, typography, UX rules, and 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.Design★ 289
- react-uihashgraph-online/awesome-codex-pluginsUse when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser. Covers JSX/React conventions, Twind/Tailwind styling, React version pinning, the view-source link requirement, and what to avoid (template-string HTML, external assets).Design★ 1.5K
- live-componentsmnandre/symfony-ux-skillsSymfony UX LiveComponent for reactive server-rendered UI -- components that re-render via AJAX on user interaction, zero JavaScript required. Use when building live search, real-time filtering, dynamic forms, inline validation, dependent selects, auto-save, polling, deferred/lazy rendering, or any UI that updates itself based on user input. Code triggers: AsLiveComponent, LiveProp, LiveAction, data-model, data-loading, data-live-action-url, ComponentWithFormTrait, LiveListener, emit, defer, lazy, polling. Also trigger when the user asks "how to build a search that filters as I type", "how to validate a form in real-time", "how to make a reactive component in PHP", "how to build dependent selects", "how to defer component rendering", "how to communicate between components via emit", "how to bind a form to a LiveComponent". Do NOT trigger for static reusable UI without reactivity (use twig-component), pure client-side JS behavior (use stimulus), or page-level navigation (use turbo).Design★ 183
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in