Claude web-artifacts-builder skill

A small calculator or chart fits in one artifact file. A tool with several screens, shared state and a component library does not, at least not while it is being written. Anthropic's web-artifacts-builder skill handles that case: Claude works in a real project, then packs the result into a single HTML file. It is one of Anthropic's open-source example skills, under the Apache 2.0 license. For background, see how Claude Skills work.

What the skill does

The skill's description limits it to complex artifacts that need state management, routing or shadcn/ui components, and tells Claude not to use it for simple single-file pages. The steps in its SKILL.md:

1. Initialize with a bundled script. It creates a React and TypeScript project on Vite, with Tailwind CSS, path aliases and more than 40 shadcn/ui components already installed.
2. Build the app by editing the generated files.
3. Bundle with a second script, which builds with Parcel and inlines every script, style and asset into one bundle.html.
4. Share that file in the conversation as an artifact.
5. Test only if needed, after you have seen it.

It carries one design rule worth copying into any prompt: avoid excessive centered layouts, purple gradients, uniform rounded corners and the Inter font.

When to use it

• An internal tool with tabs, forms and filters that colleagues open as a single file.
• A prototype with several screens for a product review.
• A dashboard that needs real components instead of hand-written HTML.

For visual direction on any interface, combine it with frontend-design. To click through the result in a browser, use webapp-testing. Our coding prompts help write the spec first.

How to install it

Claude.ai: the anthropics/skills README says its example skills are already available on paid plans. Turn on code execution and check Customize > Skills.

Claude Code:

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

Example request

Use the web-artifacts-builder skill to build [tool] for [who uses it]. Screens: [list]. It should [key interactions, e.g. filter a table, save drafts in the page]. Bundle it into one HTML file when done.

Limits

• The setup and bundle scripts install packages, so they need Node 18 or later and network access to the package registry.
• The output is a front end in one file. There is no server or database behind it.
• One inlined bundle can grow large. For a simple page, a plain artifact loads faster.
• Anthropic labels its example skills as demonstrations and advises testing before you rely on them.