Web artifacts builder skill

An artifact is the interactive page Claude can show next to the chat in claude.ai. Simple ones are a single file Claude writes in one go. This skill is for the bigger ones: a calculator with tabs, a small dashboard, a quiz app with several screens. It sets up a proper React project, lets Claude build it in pieces, then packs everything into one self-contained HTML file.

What it does (plain English)

The skill is a five-step recipe with two shell scripts doing the heavy lifting:

1. Initialize. scripts/init-artifact.sh <project-name> creates a React and TypeScript project (via Vite) with Tailwind CSS 3.4.1, the shadcn/ui theming system, 40+ shadcn/ui components and all Radix UI dependencies already installed.
2. Develop. Claude edits the generated files like a normal project.
3. Bundle. scripts/bundle-artifact.sh builds the app with Parcel and inlines every script, style and dependency into one bundle.html.
4. Share. Claude shows that file as an artifact in the conversation.
5. Test (optional). Only if you ask or something looks wrong, to avoid making you wait.

Piece	What the skill uses
UI framework	React 18 + TypeScript
Dev tooling	Vite
Bundler	Parcel, then html-inline
Styling	Tailwind CSS 3.4.1
Components	shadcn/ui (40+ pre-installed), Radix UI
Node	18 or later

The skill also has one blunt design rule. To avoid what it calls “AI slop,” Claude should avoid excessive centered layouts, purple gradients, uniform rounded corners and the Inter font.

Is it for you?

Pick it when a single-file artifact keeps hitting its limits: you want several views, form state shared across tabs, or proper UI components such as dialogs, menus and data tables. The skill’s own description says it is not meant for simple single-file HTML or JSX artifacts, so leave it off for quick one-screen tools.

You do not need to know React. You describe the app; Claude handles the project. It does help to know that “bundle” just means “squash the project into one file you can open.”

What you can do with it

1. Multi-tab tool. “Build an artifact with three tabs: budget inputs, a monthly table, and a chart. Use shadcn components.”
2. Internal mini app. “Make an onboarding checklist app with a sidebar of sections and a progress bar that updates as I tick items.”
3. Interactive training. “Create a 10-question quiz artifact with a results screen and explanations.”
4. Portable demo. “Bundle it so I can download one HTML file and send it to a colleague.” The bundled file has all dependencies inlined, so it opens on its own.

How to set it up

claude.ai or the Claude desktop app

1. Turn on Code execution and file creation in Settings > Capabilities. The scripts run in Claude’s sandbox.
2. Open Customize > Skills and look under From Anthropic & Partners; the anthropics/skills README says its example skills are already available on paid plans.
3. If it is not there, download the web-artifacts-builder folder from GitHub, zip the folder itself, and upload the ZIP in Customize > Skills.
4. Ask for a multi-component artifact and mention you want it bundled as one HTML file.

Claude Code

1. Run /plugin marketplace add anthropics/skills
2. Run /plugin install example-skills@anthropic-agent-skills and choose a scope.
3. Ask: “Use web-artifacts-builder to make a small React app and bundle it to one HTML file.” You get bundle.html in the project folder, which you can open in a browser or host anywhere that serves static files.

Claude Code estimates this skill at about 110 tokens always loaded and about 940 tokens when it runs, one of the smaller skills in the bundle. We ran the install commands successfully in Claude Code 2.1.302 on 2026-10-18; we did not build an artifact with the skill.

Watch out for

• Requirements. The bundler needs an index.html at the project root, and the init script expects Node 18 or later. In Claude Code, that means Node must be installed on your computer.
• Network access. The bundling script installs packages from npm. If your claude.ai sandbox or company network blocks package downloads, the bundle step fails.
• File size. Inlining a whole React app and its component library makes a large single HTML file. That is normal for this approach.
• Testing is skipped by default. The skill tells Claude not to test before showing you the artifact. Click through it yourself, or ask Claude to test it.
• Demo status. The anthropics/skills README says its skills are demonstrations and may behave differently from what Claude does in the product.

Alternatives

• A plain single-file artifact for simple tools; just ask Claude without this skill.
• Frontend design skill for the look and feel; it pairs well with this one.
• Netlify or Vercel MCP servers when you want the app deployed to a real URL instead of shared as a file.