Web Artifacts Builder

The Web Artifacts Builder skill is the official Anthropic Agent Skill for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend tooling — React 18, TypeScript, Vite, Tailwind CSS, and shadcn/ui — bundled into a single self-contained HTML file you can share in a Claude conversation.

What is the Web Artifacts Builder skill?

It is a skill from Anthropic's anthropics/skills repository that scaffolds, develops, and bundles complex claude.ai artifacts. It is built for artifacts that need real state management, routing, or shadcn/ui components — not simple single-file HTML or JSX snippets. The stack is React 18 + TypeScript + Vite, with Parcel handling the final bundle, Tailwind CSS 3.4.1 for styling, and 40+ shadcn/ui components pre-installed.

What it does

• Initializes a fully configured React + TypeScript project via scripts/init-artifact.sh, with Tailwind, the shadcn/ui theming system, @/ path aliases, all Radix UI dependencies, and Parcel bundling ready to go.
• Lets you develop a real multi-component app — components, state, routing — instead of a single inline file.
• Bundles everything into one self-contained bundle.html via scripts/bundle-artifact.sh, inlining all JavaScript, CSS, and dependencies with html-inline.
• Ships 40+ shadcn/ui components and their Radix UI primitives out of the box.
• Auto-detects Node version and pins a compatible Vite for Node 18+.
• Includes design guidance to avoid generic AI aesthetics — no excessive centered layouts, purple gradients, uniform rounded corners, or default Inter font.

How it works

The workflow is five steps: initialize the project with bash scripts/init-artifact.sh <project-name>, edit the generated code to build your artifact, bundle to a single HTML file with bash scripts/bundle-artifact.sh (your project needs an index.html in the root), share the resulting bundle.html as a claude.ai artifact, and optionally test it later with Playwright or Puppeteer. The bundle script installs Parcel plus path-alias and inlining plugins, builds with no source maps, and produces one portable HTML file.

Who it is for

Anyone building rich, interactive claude.ai artifacts — designers and developers prototyping dashboards, tools, and mini-apps inside Claude who need component libraries, routing, and state rather than a single throwaway HTML file. It assumes comfort with React, TypeScript, and Tailwind.

What you can build

Multi-screen dashboards, interactive data tools, form-driven apps with validation, component galleries, and any artifact that combines shadcn/ui components, client-side routing, and stateful React logic — all delivered as one shareable HTML file.

Why it matters

claude.ai artifacts must run as a single self-contained HTML file, which makes a real React + Tailwind + shadcn/ui build pipeline awkward to assemble by hand. This skill provides the exact scaffolding and a Parcel-based bundler that inlines everything, so an agent can produce polished, component-rich artifacts that actually run in Claude — while steering clear of the look that reads as generic AI output.

1. Install via the skills CLI

npx skills add anthropics/skills --skill web-artifacts-builder

2. Or add it as a Claude Code plugin

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

3. Use it

Ask Claude to build a complex artifact — for example, "build a multi-tab analytics dashboard with shadcn/ui". The skill initializes the React project, you (or the agent) develop it, then it bundles to a single shareable bundle.html.