Skill of the day: `web-artifacts-builder`

web-artifacts-builder is an official Anthropic Agent Skill shipped inside the example-skills plugin (marketplace anthropic-agent-skills). It scaffolds elaborate, multi-component claude.ai HTML artifacts with React + Tailwind + shadcn/ui, then bundles to a single HTML file. Use when you need state, routing, or shadcn components — not for simple single-file HTML/JSX. Install: /plugin install example-skills@anthropic-agent-skills. MDX pillar: reviews (never skills). Checked 2026-09-30.

TL;DR: Init with scripts/init-artifact.sh, develop, then scripts/bundle-artifact.sh → bundle.html. [GAP]: no solo /plugin install web-artifacts-builder@… — install unit is example-skills. Labs: no item for web artifacts builder — do not invent vol/KD.

What it does

SKILL.md frontmatter (fetched 2026-09-30):

• name: web-artifacts-builder
• description: 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.
• license: Complete terms in LICENSE.txt → Apache-2.0, Copyright 2026 Anthropic, PBC.

Stack: React 18 · TypeScript · Vite · Parcel (bundling) · Tailwind CSS · shadcn/ui (40+ components pre-installed per init notes).

Design note (SKILL.md): avoid “AI slop” — excessive centered layouts, purple gradients, uniform rounded corners, Inter font.

Workflow (5 steps)

1. Initialize: bash scripts/init-artifact.sh <project-name> then cd <project-name>

2. Develop: edit the generated frontend

3. Bundle: bash scripts/bundle-artifact.sh → bundle.html (requires root index.html)

4. Share: present the bundled HTML artifact to the user

5. Optional test later (Playwright/Puppeteer etc.) — skill says avoid upfront testing latency; test after presenting if needed

Install (Claude Code)

/plugin marketplace add anthropics/skills

Then Browse → anthropic-agent-skills → example-skills → Install, or direct:

/plugin install example-skills@anthropic-agent-skills

Fact (marketplace.json, 2026-09-30): marketplace name anthropic-agent-skills; plugin example-skills; skill path ./skills/web-artifacts-builder. Metadata version 1.0.0 (catalog field — not per-skill semver). Installing pulls the whole example set (siblings include canvas-design, mcp-builder, doc-coauthoring, frontend-design, skill-creator, and others).

Walkthrough: add the marketplace.

When to use / when not

Use when you need a multi-component claude.ai HTML artifact with React state, routing, or shadcn/ui — and want the init + Parcel bundle-to-single-HTML path.

Do not:

• Simple single-file HTML/JSX artifacts → skip this skill (per SKILL.md)

• Static poster/PDF art → live canvas-design radar — do not re-Intake

• Building MCP servers → live mcp-builder radar — do not re-Intake

• Structured doc co-writing → live doc-coauthoring radar — do not re-Intake

• Re-Intake skill-creator / frontend-design / internal-comms (ship-queue or covered elsewhere — no 404 hrefs)

Limits + live pairings

• Demo/reference skill in the official repo; product behavior may differ.
• Ships with the full example-skills bundle — expect siblings, not a minimal single-skill package.
• Bundled bundle.html path assumes root index.html.
• Optional testing adds latency — present first, test later when needed.
• Not a substitute for canvas-design (static art) or mcp-builder (MCP servers).

Guide / radar	Moment
canvas-design	Sibling example-skills radar — static PNG/PDF art (live 200)
mcp-builder	Sibling — MCP servers (live 200)
doc-coauthoring	Sibling — structured docs (live 200)
add anthropics/skills marketplace	First /plugin setup

Sources (checked 2026-09-30)

• SKILL.md — name, description, init/bundle workflow
• LICENSE.txt — Apache-2.0 · Copyright 2026 Anthropic, PBC.
• marketplace.json — marketplace anthropic-agent-skills; plugin example-skills; ./skills/web-artifacts-builder; metadata version 1.0.0
• Skill tree: github.com/anthropics/skills/tree/main/skills/web-artifacts-builder

Ship reminder: MDX pillar: reviews only; install unit example-skills@anthropic-agent-skills.