What it does
A toolkit for complex multi-component HTML artifacts on claude.ai built on a modern frontend stack: React 18 + TypeScript + Tailwind CSS + shadcn/ui, with Vite as the dev server and Parcel for the build. The workflow: initialise the project → develop the components → bundle everything into one HTML file with inlined assets → hand it to the user. Meant for projects with state, routing or a component library, where plain static HTML is not enough.
How to set it up
It ships in the example-skills bundle:
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
Or drop the web-artifacts-builder/ folder into ~/.claude/skills/.
When to use it
- You need an interactive artifact (dashboard, calculator, mini app) with real components and state.
- You want a modern React/TS/Tailwind stack but a single self-contained HTML as the output.
Example
"Build an interactive dashboard with filters and charts as an artifact" — the skill splits it into React + shadcn components and glues them into one HTML file with inlined assets.