Initializes a React 18 + TypeScript + Vite project with Tailwind CSS and 40+ shadcn/ui components, then bundles everything with Parcel and html-inline into one self-contained bundle.html for claude.ai artifacts. Intended for complex artifacts needing state, routing or shadcn/ui.
What it does
Where Web Artifacts Builder runs and what it adds, from its documentation
Initializes a project with scripts/init-artifact.sh
Preconfigures React, TypeScript, Vite, Tailwind 3.4.1, path aliases and shadcn/ui
Bundles to a single inlined bundle.html with scripts/bundle-artifact.sh
Advises against generic AI-slop styling (centered layouts, purple gradients, Inter font)
Testing is optional and done after presenting the artifact
When to use it
Good fit
Complex claude.ai artifacts needing state management, routing or shadcn/ui
Not for
Simple single-file HTML or JSX artifacts
How to install Web Artifacts Builder
You need: Node 18+ (script pins a compatible Vite version); index.html in project root for bundling
Register the marketplace in Claude Code: /plugin marketplace add anthropics/skills
Install the bundle that contains it: /plugin install example-skills@anthropic-agent-skills
Or copy the skill folder to ~/.claude/skills/web-artifacts-builder/ (personal) or .claude/skills/web-artifacts-builder/ (project)
Mention the task in a prompt; Claude loads the skill automatically when the SKILL.md description matches
Permissions and security
What it can access
Runs shell scripts that install npm packages (parcel, html-inline and others) and build files
Security notes from the maintainers
Anthropic repo disclaimer: skills are provided for demonstration and educational purposes; behavior in Claude may differ
Review the source before granting an agent access to credentials or production systems. We document what the maintainers state; we do not audit code.
Limitations
Repo README says skills are demonstration/educational examples
How do I install the web-artifacts-builder skill in Claude Code?
Add the marketplace with /plugin marketplace add anthropics/skills and install the bundle containing it, or copy skills/web-artifacts-builder into ~/.claude/skills/. source
When does Claude use the web-artifacts-builder skill?
Claude loads it automatically when the request matches the description field in its SKILL.md frontmatter. source
What license does the web-artifacts-builder skill use?
Its SKILL.md points to LICENSE.txt, which is the Apache License 2.0. source
