Domains
Forms
Mechanism
Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.
When a user needs a complex claude.ai HTML artifact with React, state management, routing, or shadcn/ui components (not a simple single-file HTML/JSX).
scripts/init-artifact.sh to scaffold a Vite + React + TS + Tailwind + shadcn/ui projectscripts/bundle-artifact.sh to inline everything into a single bundle.html via ParcelA self-contained, interactive HTML artifact ready to display in Claude, with professional UI and no build step for the viewer.
Use Cases
A product manager wants an interactive dashboard prototype as a Claude artifact to share with stakeholders. Using this skill, the agent scaffolds a React + shadcn/ui project, builds charts and filters with state management, then bundles to a single HTML. The PM gets a polished, self-contained prototype instantly viewable in chat, accelerating feedback loops.
A developer needs a multi-step wizard UI with routing as a Claude artifact for a demo. The skill initializes a Vite project with Tailwind and 40+ components, the dev edits routes and forms, then bundles via script. Result is a single HTML file demo with no external dependencies, easy to distribute and present.
Skill Relationships
Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.
Tier 1 · These Skills Use Me
Tier 2 · Current Skill
Tier 3 · I Use These Skills
Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.
Skill File