Web Artifacts Builder

What it does

Gives Claude a scripted workflow for producing complex claude.ai HTML artifacts backed by a real React toolchain. Claude runs an init script to scaffold a Vite + TypeScript project preloaded with Tailwind, shadcn/ui, Radix primitives, and path aliases, edits the source, then runs a bundle script that uses Parcel and html-inline to collapse everything into one self-contained bundle.html. Use it when an artifact needs multiple components, state, routing, or shadcn/ui — not for a one-file HTML or JSX snippet.

Use cases

• Ship a multi-view dashboard artifact with shadcn/ui tables, dialogs, and tabs where hand-writing a single-file JSX artifact would be unmanageable.
• Prototype an internal tool UI — for example a Kanban board or form builder — that needs real component state and clean shadcn styling before handing it to engineers.
• Package a small React app for a client demo into one HTML file that can be dropped into a Claude conversation or emailed without a server or build step.

When to use it

• The artifact needs 3+ interacting components or shared state across views.
• You want shadcn/ui components (dialogs, sheets, command palettes, data tables) that are painful to inline.
• You need TypeScript type-checking and path aliases while iterating on the artifact.
• The final deliverable must be a single HTML file with everything inlined.

When NOT to use it

• A single-file HTML or JSX artifact would do the job — the scaffold and bundle steps add real latency.
• The environment can’t run bash scripts, install npm packages, or use Node 18+.
• You need a backend, server-side rendering, or persistent storage beyond localStorage.
• The design brief calls for centered purple-gradient hero pages with Inter and uniformly rounded cards — the skill’s guidelines explicitly push back on that aesthetic.

Installation

/plugin install web-artifacts-builder@anthropic-agent-skills

If you haven’t added the Anthropic marketplace yet, run this first:

/plugin marketplace add anthropics/skills

After install, just mention it in conversation:

Use the Web Artifacts Builder skill to create a Kanban board artifact with drag-and-drop columns, shadcn/ui cards, and local persistence.

Troubleshooting

bundle-artifact.sh fails with a path alias or module resolution error Make sure you ran the bundle script from the project root (the folder containing index.html) and that your imports use the @/ alias configured by the init script. The bundler relies on parcel-resolver-tspaths plus the .parcelrc written by the script, so custom Parcel configs will override it.

Vite install fails on older Node versions The init script auto-detects your Node version and pins a compatible Vite release, but it requires Node 18 or newer. Upgrade Node (via nvm or your package manager) and re-run bash scripts/init-artifact.sh <project-name> in a clean directory.

Bundled artifact renders blank in claude.ai Open bundle.html locally in a browser first to confirm it works standalone. Blank renders are usually caused by an uncaught runtime error, a missing index.html at project root before bundling, or referencing external assets by URL — everything must be inlined, so use imports rather than src= or href= to files outside the bundle.