Official · by Anthropic

Web artifacts builder Claude skill

The Web artifacts builder skill helps an AI assistant create multi-component HTML artifacts using modern frontend web technologies.

Apache-2.0 licence
★ 182,168 on GitHub (whole repository)
Verified against its source 19 Oct 2026

View SKILL.md Repository

What the Web artifacts builder skill does

The assistant can set up a new React project and build complex artifacts that need state management, routing, or shadcn/ui components. The result is a single self-contained bundle.html file with all JavaScript, CSS, and dependencies included, which can be shared as an artifact in conversations. It is not meant for simple single-file HTML or JSX artifacts.

What it covers

Initialize a React + TypeScript project with Tailwind and shadcn/ui via script
Bundle React app into a single self-contained HTML artifact
Share the bundled HTML file as an artifact in conversation
Optional testing of the artifact with tools like Playwright or Puppeteer

How to install it

In Claude Code

/plugin marketplace add anthropics/skills

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

This plugin also installs: algorithmic-art, brand-guidelines, canvas-design, doc-coauthoring, frontend-design, internal-comms, mcp-builder, skill-creator, slack-gif-creator, theme-factory, webapp-testing.

What you need

In its documentation's own words:

“Node 18+ compatibility (auto-detects and pins Vite version)”

Steps change between versions. Check the official instructions before you install.