Setup & Installation
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder
https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
View on GitHubWhat This Skill Does
Builds multi-component HTML artifacts for claude.ai using React 18, TypeScript, Tailwind CSS, and shadcn/ui. Handles the full pipeline: project initialization, component development, and bundling everything into a single self-contained HTML file. Designed for artifacts that need state management, routing, or a component library, not simple one-off HTML files.
Setting up React, Tailwind, shadcn/ui, and a single-file bundler from scratch takes 30+ minutes of config; this skill scripts the entire setup and bundle step into two commands.
When to use it
- Building a multi-step form wizard with shadcn/ui components as a claude.ai artifact
- Bundling a React dashboard with charts and filters into a single shareable HTML file
- Scaffolding a new artifact project with Tailwind and 40+ shadcn/ui components already wired up
- Converting a Vite + TypeScript project into an inline artifact with no external dependencies
- Iterating on a stateful UI prototype directly inside a Claude conversation