web-artifacts-builder (Anthropic): a Claude skill for multi-component React artifacts

Anthropic's web-artifacts-builder skill has Claude build React, Tailwind and shadcn/ui apps and bundle them into one HTML file for claude.ai.

Installs: 115K; on skills.sh
Stars: 186.4K; on GitHub
Files: 4; besides SKILL.md
Updated: Oct 2026; last repo commit

web-artifacts-builder is Anthropic's skill for complex claude.ai artifacts. It is not for simple single-file HTML or JSX artifacts. Claude starts a project from a script, you edit it, and a second script bundles everything into one self-contained bundle.html to share in the conversation.

The stack is React 18, TypeScript, Vite, Parcel for bundling, Tailwind CSS 3.4.1 and shadcn/ui, with more than 40 components pre-installed. The skill runs two bash scripts that install npm packages on your machine, so it needs Node.js and a shell.

Good for

Anyone who wants a claude.ai artifact with state, routing or shadcn/ui components
Front-end developers prototyping a small React app inside Claude
Designers who want a shareable single-file demo

Install web-artifacts-builder

Claude Code

Copy this prompt.

Install the web-artifacts-builder skill in Claude Code. Run this command:

npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Sections in SKILL.md

Design & Style Guidelines
Quick Start
Step 1: Initialize Project
Step 2: Develop Your Artifact
Step 3: Bundle to Single HTML File
Step 4: Share Artifact with User
Step 5: Testing/Visualizing the Artifact (Optional)
Reference

Key facts

Author: Anthropic
Repo: anthropics/skills
Skill folder: skills/web-artifacts-builder
skills.sh installs: 114,990
Repo stars: 186,362
License: Terms in LICENSE.txt in the skill folder (SKILL.md does not name a license)
Last repo commit: 2026-10-28
Bundled files: 4 files besides SKILL.md: LICENSE.txt, scripts/bundle-artifact.sh, scripts/init-artifact.sh, scripts/shadcn-components.tar.gz
skills.sh audits: Gen Agent Trust Hub: pass; Socket: warn; Snyk: pass

What it includes

Create a new React + TypeScript + Tailwind + shadcn/ui project
Run as bash scripts/init-artifact.sh <project-name>. Per SKILL.md it sets up path aliases, Parcel config and 40+ shadcn/ui components; the script itself uses pnpm and installs it first if missing.
Runs code · scripts/init-artifact.sh
Edit the generated code
Write · Develop the artifact
Bundle the app into a single self-contained bundle.html
Installs parcel, @parcel/config-default, parcel-resolver-tspaths and html-inline, builds with Parcel, and inlines all assets. Needs an index.html in the project root.
Runs code · scripts/bundle-artifact.sh
Show bundle.html in the conversation
Share the artifact
Use other tools such as Playwright or Puppeteer only if asked or if issues arise
Test (optional)

From the official docs

Permissions

Medium risk

Claude runs two shell scripts that create a project, install packages with pnpm and, if pnpm is missing, install pnpm globally with npm. Run it in a scratch folder and read the scripts first.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs shell scripts and installs packages
init-artifact.sh runs pnpm create vite and pnpm install; bundle-artifact.sh adds parcel, @parcel/config-default, parcel-resolver-tspaths and html-inline. Read both scripts and use a scratch folder.
It can install pnpm globally
If pnpm is not found, init-artifact.sh runs npm install -g pnpm. That changes your global npm packages.
It unpacks a bundled archive
init-artifact.sh extracts shadcn-components.tar.gz into src/ of the new project. Check what it unpacks if you care about the exact files.

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. The skill creates a project and installs packages.
Talks to	npm registry, when the scripts install dependencies
Sign-in and keys	No account or key is named in SKILL.md.
Scopes	Runs bash scripts/init-artifact.sh and scripts/bundle-artifact.sh Creates a project folder, installs packages with pnpm and unpacks a bundled components archive into src/ Writes bundle.html and deletes dist/ and any old bundle.html in the project

Questions

What does web-artifacts-builder do?

It makes Claude scaffold a React app, build your artifact in it, and bundle it into one HTML file that you can share as a claude.ai artifact.

How do I install web-artifacts-builder in Claude Code, Claude or Codex?

Use the install box at the top of the page and pick Claude Code, Claude or Codex. Claude Code and Codex read skills from a folder on your machine. In the Claude app you upload the skill folder as a zip.

Do I need it for a simple HTML artifact?

No. The description says it is for complex artifacts that need state management, routing or shadcn/ui components, not simple single-file HTML or JSX artifacts.

Does it need an API key?

No key is named in SKILL.md. It does need Node.js (the init script mentions Node 18+) and the ability to run bash scripts and install packages.

Is it safe to use?

It runs two bundled bash scripts that install packages with pnpm. init-artifact.sh runs npm install -g pnpm if pnpm is missing, and bundle-artifact.sh deletes dist/ and bundle.html in the project. Read both scripts and run it in a scratch folder.

What does it avoid in the design?

SKILL.md says to avoid what it calls AI slop: excessive centered layouts, purple gradients, uniform rounded corners and the Inter font.

Information

updated Nov 2, 2026

Repository: anthropics/skills
Folder: skills/web-artifacts-builder

anthropics/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

web-artifacts-builder SKILL.md · github.com
web-artifacts-builder on skills.sh · skills.sh
init-artifact.sh · github.com
bundle-artifact.sh · github.com