web-artifacts-builder

An agent skill by anthropics, from anthropics/skills. Tags: anthropic, design, developer-tools, visual-art, web.

What it does

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.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

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

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/anthropics/skills
cp -r skills/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder

Safety box score

Grade C, moderate risk: 42 of 100 risk points, rated 2026-10-19. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill creates and bundles React/Tailwind/shadcn frontend projects by running shell scripts that install many npm packages, write config files, and generate a self-contained HTML artifact. The main risks are normal build-tool blast radius: network fetches, a global `pnpm` install if missing, recursive deletion of build outputs, and an unreadable bundled tarball that gets extracted into the project.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	2 (moderate)	It runs shell and Node code directly: `bash scripts/init-artifact.sh`, `node -e ...`, `pnpm create vite`, and `pnpm exec parcel build`/`html-inline`.
Network access	2 (moderate)	Both scripts fetch third-party code and packages from registries, e.g. `npm install -g pnpm`, `pnpm create vite`, `pnpm install`, and `pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline`.
Filesystem reach	2 (moderate)	It writes many project files and can delete build outputs with `rm -rf dist bundle.html`; the scope is the current project, but the delete is recursive and destructive.
Secrets & credentials	0 (none)	No code reads credential stores, `.env` files, keychains, browser sessions, or other secret material.
Privilege & persistence	2 (moderate)	`scripts/init-artifact.sh` will install `pnpm` globally with `npm install -g pnpm` if it is missing, which changes user/system-wide tooling.
Instruction hijack surface	0 (none)	There is no instruction to ignore higher-level rules, follow remote instructions, hide actions, or alter agent behavior beyond normal artifact-building guidance.
Irreversible actions	1 (low)	The skill can optionally test/visualize the artifact with external tools like Playwright/Puppeteer, but it does not publish, send, pay, or deploy anything.
Transparency	2 (moderate)	`scripts/shadcn-components.tar.gz` is a binary tarball that could not be read here, yet `init-artifact.sh` extracts it with `tar -xzf` into `src/`.

Before installing

Read `scripts/init-artifact.sh` for the global `npm install -g pnpm` step and the packages it will fetch.
Inspect or replace `scripts/shadcn-components.tar.gz` before trusting the extracted `src/` contents.
Run the scripts in a scratch project directory, because `scripts/bundle-artifact.sh` deletes `dist` and `bundle.html`.
If you already have pnpm, skip the global install and invoke the scripts with your existing toolchain.

Rated 2026-10-19 by an automated review of 4 files from the skill's repository.

Source

Repository: anthropics/skills (all skills from this repository)
Path: skills/web-artifacts-builder/SKILL.md
Branch: main
Updated: 2026-09-19

algorithmic-art — Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code.
frontend-design — Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
archify — Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG.
brand-guidelines — Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel.
canvas-design — Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art.
slack-gif-creator — Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts.