— Skill

Claude Web Artifacts Builder

Complex Claude.ai artifacts need state, routing, and shadcn — this skill init → develop → bundles to a single HTML file instead of a fragile one-shot JSX paste.

What changes

Runs Anthropic’s web-artifacts-builder loop: init-artifact.sh → React/Tailwind/shadcn app → bundle-artifact.sh into one shareable HTML artifact for Claude.ai.

When

Use Anthropic’s web-artifacts-builder skill when the Claude.ai deliverable is an elaborate multi-component HTML artifact — React state, routing, or shadcn/ui — that must ship as one bundled file.

Good fits:

• Interactive dashboards or multi-step tools inside Claude artifacts.
• Apps that need Tailwind + shadcn components, not raw div soup.
• Anything that should init from the skill’s Vite/React scaffold, then bundle.

Skip it for simple single-file HTML/JSX artifacts, production Next.js apps (vercel-react-best-practices), or taste-only landing critiques (frontend-design-taste). For theme tokens on slides/docs, see claude-theme-factory.

How to start

Enable web-artifacts-builder from anthropics/skills (example-skills). Init with scripts/init-artifact.sh, develop, then bundle with scripts/bundle-artifact.sh and share the HTML.

Attach the web-artifacts-builder skill (multi-component Claude.ai artifact — NOT a one-file JSX paste).
Goal: [what the artifact does]. Must have: [state / routing / shadcn pieces].
Steps: init-artifact.sh → develop → bundle-artifact.sh → share bundle.html.
Stack: React 18 + TS + Vite + Tailwind + shadcn/ui.
Design: avoid purple gradients, Inter, and excessive centered AI-slop layouts.
Do not test before the first share unless I ask.