Web Artifacts Builder (Anthropic, official)

tl;dr: the Anthropic procedure for shipping a multi-component React artifact into a claude.ai conversation as a single HTML file. SKILL.md is the orchestration layer; the heavy lifting is scripts/init-artifact.sh and scripts/bundle-artifact.sh. Stack is fixed: React 18 + TypeScript + Vite + Parcel + Tailwind CSS 3.4.1 + shadcn/ui (40+ components pre-installed).

What it actually does

The SKILL.md we fetched on 2026-09-10 from anthropics/skills/main/skills/web-artifacts-builder/SKILL.md defines a five-step pipeline:

1. Initialize the React/TS/Vite project via bash scripts/init-artifact.sh <project-name>.
2. Develop by editing the generated code (40+ shadcn/ui components pre-installed, Radix UI deps included, @/ path aliases).
3. Bundle to a single self-contained HTML file with bash scripts/bundle-artifact.sh — uses Parcel + html-inline to inline JS, CSS, and assets into bundle.html.
4. Share the bundled HTML in conversation.
5. (Optional) Test/visualize with Playwright or other tools — only if requested, never upfront.

The skill is explicit about scope: use it for complex artifacts that need state management, routing, or shadcn/ui. For trivial single-file HTML/JSX, drop the skill.

Stack

Quick start

# 1. Initialize
bash scripts/init-artifact.sh my-app
cd my-app

# 2. Develop — edit src/

# 3. Bundle to single HTML
bash scripts/bundle-artifact.sh
# → produces bundle.html, ready to share as an artifact

scripts/bundle-artifact.sh installs bundling deps (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline), creates .parcelrc with path-alias support, builds with Parcel (no source maps), and inlines assets.

Design guardrail (verbatim from SKILL.md)

To avoid what is often referred to as “AI slop”, avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

The skill is opinionated on aesthetic defaults — agents that ignore it ship the same gradient-heavy landing pattern.

Install

web-artifacts-builder ships inside Anthropic’s example-skills plugin:

# Claude Code — register the marketplace, then install the example-skills plugin
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Then enable web-artifacts-builder. On Claude.ai, the example skills ship pre-built for paid plans. There is no npm package per-skill.

What it explicitly is not

• Not a static HTML generator. Single-file HTML/JSX artifacts fall outside the skill’s scope — use it for state, routing, or shadcn/ui components.
• Not a deploy target. bundle.html is for sharing in a Claude conversation. Hosting the artifact on a real domain is a separate workflow (e.g. Vercel).
• Not a test harness. Step 5 (Playwright visual check) is opt-in and only triggered when the user asks. The skill explicitly warns against testing upfront — it adds latency between request and finished artifact.
• sandbox_test untested — we read the package, we did not run init-artifact.sh in the sandbox.

Gotchas

• Node version matters. init-artifact.sh auto-detects Node 18+ and pins the Vite version. Older Node versions break the install silently.
• Path aliases only work because of .parcelrc. If you delete .parcelrc during cleanup, @/components/Button imports break in the bundle. parcel-resolver-tspaths is load-bearing.
• 40+ shadcn/ui components is a starting point, not a constraint. If the design needs a component shadcn doesn’t ship, you have to write it from scratch — the skill does not bootstrap custom components.
• Testing is opt-in, not free. Playwright/Puppeteer adds latency. The skill is explicit: present the artifact first, test only if issues surface.
• License says “Complete terms in LICENSE.txt”. Anthropic’s example-skills plugin defaults to Apache 2.0, but the per-skill LICENSE.txt is authoritative.

Related: Frontend Design (Anthropic) — same Anthropic UI skills shelf, focused on design quality; UI Skills Catalog (Anthropic) — broader Anthropic UI skills surface; Vercel React Best Practices — production React patterns for when the artifact graduates to a real app.