web-artifacts-builder Skill: React Artifacts for Claude

/plugin install example-skills@anthropic-agent-skills

web-artifacts-builder is one of Anthropic’s example skills. It turns Claude from a writer of single-file demos into a builder of elaborate, multi-component web artifacts using a modern frontend stack: React 18, TypeScript, Vite, Tailwind CSS and shadcn/ui, bundled with Parcel into one HTML file.

What it does

The skill gives Claude a repeatable four-step workflow:

1. Initialize a project with scripts/init-artifact.sh <project-name>, which sets up React, TypeScript, Tailwind 3.4, path aliases and 40+ preinstalled shadcn/ui components.
2. Develop the artifact by editing the generated code.
3. Bundle everything with scripts/bundle-artifact.sh into a single bundle.html.
4. Share the artifact, optionally testing it first.

It also carries design guidance: avoid “AI slop” patterns such as excessive centered layouts, purple gradients, uniform rounded corners and the Inter font.

Install

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

The example-skills plugin also includes canvas-design, theme-factory, algorithmic-art and others. On paid Claude.ai plans, Anthropic’s example skills are already available.

Example prompts

Build a habit-tracker artifact with tabs, a calendar view and local state
Create a pricing calculator with shadcn sliders and a summary card
Turn this CSV into an interactive dashboard artifact with filters

Tips and limits

• Overkill for small widgets; Claude should skip it for simple pages.
• The first run installs dependencies, so expect a slower start.
• Pair it with the frontend-design skill for stronger visual direction and webapp-testing to check behavior.
• Anthropic labels these skills as demonstrations; behavior in Claude’s own products may differ.

Related: theme-factory, skills guide.