web-artifacts-builder: a Claude Code skill by Anthropic

Official

For developers making multi-screen claude.ai artifacts with state, routing or shadcn/ui parts. Skip it for a simple one-file HTML or JSX demo.

Copy install command View the source

Score: 86of 100
Rank: #23of 239
Installs: 118Kon skills.sh
Security: Mixed 5 scanners
Updated: Nov 62026
Context: ~77tokens always

Install

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

Run it in your terminal. View the source

Using the Claude app rather than Claude Code? You can add a skill there too. How to add it in the app

What does web-artifacts-builder do?

web-artifacts-builder is a skill for building larger claude.ai artifacts as React apps and handing them over as one HTML file. Claude runs init-artifact.sh to create a project with React 18, TypeScript, Vite, Tailwind CSS and more than 40 shadcn/ui components. It edits that code, then runs bundle-artifact.sh, which installs Parcel and html-inline and folds every script, style and asset into bundle.html. That file is what gets shared in the conversation. Browser testing is optional and comes after delivery. The style notes warn against centering everything, purple gradients, the same rounded corners on every element and the Inter font.

When should you use web-artifacts-builder?

Use it when

An artifact needs several views, routing or shared state
You want shadcn/ui components inside a claude.ai artifact
You need a whole React app as one portable HTML file

Skip it when

A single HTML or JSX file is enough
You are building a real site to deploy, not an artifact

What it needs and what it can touch

You need

Node.js 18 or newer
Bash to run the setup and bundle scripts

What it can do

Runs bundled shell scripts
Installs npm packages into a new project folder
Writes a single bundle.html file

From reading its instructions, not from running it.

Why it scores 86

Strongest on upkeep (100 of 100), weakest on adoption (68).

Adoption35 points 68
Upkeep20 points 100
Trust20 points 94
Quality15 points 100
Reader answers10 points Not enough answers yet, so this does not count

How the formula works

Is web-artifacts-builder safe to install?

At least one scanner raised a medium warning. Read the results below. Scanners often miss what other scanners catch, and a skill can change after a scan. Read its source before you install it.

Scanner	Result	Date
Gen Agent Trust Hub	Passed	Sep 14, 2026
Socket	Medium risk	Sep 14, 2026
Snyk	Low risk	Sep 14, 2026
Runlayer	Medium risk	Feb 26, 2026
ZeroLeaks	Passed	Apr 16, 2026

Details

Installs: 118,366
Repository stars: 192,526
Last repository change: Nov 6, 2026
Tokens always loaded: about 77
Tokens when used: about 673
License: Apache-2.0
Data confidence: High

Alternatives to web-artifacts-builder

All skills for this job

shadcn

For React developers on shadcn/ui who want Claude to add and compose components through the CLI.

Score 93 415K installs Official

Get shadcn
stitch-loop

For builders who want an agent to grow a multi-page site with Google Stitch, one page per run.

Score 76 57.3K installs Official

Get stitch-loop
angular-developer

For Angular developers who want Claude to write version-aware, current Angular code and check it builds.

Score 78 49.1K installs Official

Get angular-developer
vercel-react-best-practices

For React and Next.js developers who want slow pages and heavy bundles fixed by a ranked rulebook.

Score 95 89K installs Official

Get vercel-react-best-practices