The web-artifacts-builder skill: complex React artifacts in one HTML file

Source: anthropics/skills · Maintainer: Anthropic · License: Apache 2.0 · Checked: 23 October 2026

What is the web-artifacts-builder skill?

The web-artifacts-builder skill lets an agent build a multi-component React app with Tailwind CSS and shadcn/ui, then squeeze it into one HTML file that works as a claude.ai artifact. It is for people who have outgrown single-file artifacts and want routing, real state or a full component library in what they build with Claude.

Its official description in the SKILL.md reads: "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."

The exact folder name is web-artifacts-builder, inside Anthropic's anthropics/skills repo (about 183,000 stars when checked). Its skills.sh page showed 111.9K installs on 23 October 2026.

What does the web-artifacts-builder skill do?

The agent loads it when you ask for an elaborate artifact: a dashboard with tabs and dialogs, a multi-step tool, anything that would be painful as one hand-written file. The SKILL.md gives a five-step process:

1. Create the project with scripts/init-artifact.sh.
2. Build the artifact by editing the generated code.
3. Bundle everything into one HTML file with scripts/bundle-artifact.sh.
4. Show the artifact to the user.
5. Optionally test it.

The stated stack is React 18, TypeScript, Vite, Parcel for bundling, Tailwind CSS and shadcn/ui. The skill also carries one design rule in capitals: to avoid what it calls "AI slop," skip excessive centered layouts, purple gradients, uniform rounded corners and the Inter font. For deeper design guidance, pair it with the frontend-design skill.

What do the scripts set up?

According to the SKILL.md and the script itself, init-artifact.sh <project-name> produces:

• A React and TypeScript project created with Vite's react-ts template.
• Tailwind CSS 3.4.1 with the shadcn/ui theming system and tailwindcss-animate.
• The @/ path alias in the TypeScript and Vite configs.
• 40+ shadcn/ui components (accordion, button, card, dialog, form, table, tabs, tooltip and more), unpacked from the bundled shadcn-components.tar.gz, plus their Radix UI dependencies.
• Node 18 support: on Node 18 it pins Vite 5.4.11; on Node 20 or later it uses the latest Vite.

bundle-artifact.sh, run from the project root, needs an index.html there. It installs parcel, @parcel/config-default, parcel-resolver-tspaths and html-inline, writes a .parcelrc with path alias support, builds with Parcel without source maps, and inlines every asset into bundle.html.

What is in the folder?

• SKILL.md: the process, design rule and quick start.
• scripts/init-artifact.sh: project setup.
• scripts/bundle-artifact.sh: single-file bundling.
• scripts/shadcn-components.tar.gz: the prebuilt shadcn/ui components.
• LICENSE.txt: Apache 2.0.

How do you install the web-artifacts-builder skill?

Claude.ai. The anthropics/skills README says the example skills "are all already available to paid plans in Claude.ai." Anthropic's article on using skills in Claude explains enabling code execution and toggling skills under Customize, Skills. Since the skill exists to make claude.ai artifacts, this is its home ground.

Claude Code plugin. The README documents these commands for a Claude Code session:

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

That installs the full example-skills plugin, which includes this skill along with frontend-design, webapp-testing and others.

The skills CLI. To install only this skill, use the command shown on skills.sh:

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

The skills CLI reference explains -g (all projects) and -a claude-code (target Claude Code). The folder lands in .claude/skills/web-artifacts-builder/ in your project, or ~/.claude/skills/web-artifacts-builder/ globally. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills. Outside claude.ai, the result is simply a bundle.html you can open in a browser.

How do you use it?

Ask for something that clearly needs more than one file. Some prompts that fit:

• "Build a habit tracker artifact with a weekly grid, a settings dialog and a stats tab, using shadcn components."
• "Make a multi-step onboarding form with validation, a progress bar and a summary screen."
• "Create a project dashboard with a sortable table, filters in a sheet and toast notifications, then bundle it."
• "Turn this JSON of survey results into an interactive artifact with tabs for each question and charts."
• "Rebuild my single-file artifact as a React project so we can add routing and shared state."

Requirements

• Node.js 18 or later. The init script checks and stops on older versions.
• pnpm. If it is missing, the init script runs npm install -g pnpm for you.
• Network access to download Vite, Tailwind, Radix, Parcel and the other packages.
• A shell that can run bash scripts (macOS, Linux, or a Unix-like shell on Windows).

Tips and limits

• Don't use it for small things. Its own description rules out simple single-file artifacts. Scaffolding and installing dozens of packages takes time a quick widget doesn't need.
• It changes your machine. The init script can install pnpm globally, and both scripts install packages from npm. Run them in a scratch folder and read what they do if you are cautious.
• Check the React version. The SKILL.md says React 18, but the init script uses the current Vite react-ts template without pinning React, so the version you get depends on that template. Look at package.json if it matters.
• Testing comes after. The SKILL.md tells the agent to skip testing up front because it delays showing the artifact, and to test later if asked or if something breaks. The webapp-testing skill can handle that step.
• Watch the file size. Everything, including every dependency you import, is inlined into one file. The bundle script prints the final size so you can check it.
• Demonstration status. Anthropic's README calls its skills "provided for demonstration and educational purposes only." skills.sh also lists third-party security audit results for this skill.

Save it in your Kipt library

Kipt is a place to keep skills like this next to your prompts. Open Skills in Kipt and paste the skill's GitHub folder link into the import box; Kipt reads the SKILL.md and its files, and for a repo with many skills it shows a list to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Similar skills

• frontend-design skill: design direction for the UI you build.
• webapp-testing skill: check the bundled artifact in a real browser.
• design-taste-frontend skill: another take on avoiding generic AI interfaces.
• Claude skills examples: more skills worth knowing.