Web Artifacts Builder Skill

npx degit anthropics/skills/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder

web-artifacts-builder is the heavyweight cousin of single-file artifacts. When you need state management, routing, multiple components, or shadcn/ui primitives, this is what you reach for.

What’s in the box

• React 18 + TypeScript via Vite
• Tailwind CSS 3.4 with shadcn/ui theming
• 40+ shadcn/ui components pre-installed + Radix UI deps
• Path aliases (@/) configured
• Parcel for the final bundling step
• Single-file HTML output via html-inline

The workflow

1. bash scripts/init-artifact.sh <project-name> — scaffolds the project
2. Edit the generated React code as you would any normal app
3. bash scripts/bundle-artifact.sh — produces bundle.html, fully inlined

The bundle has all JS, CSS, and dependencies inside one HTML file. Drop it into a Claude conversation as an artifact, share the file, host it on Cloudflare Pages — anywhere.

Anti-AI-slop guidance

The skill explicitly warns against the four tell-tale signs of “AI-looking” output: excessive centered layouts, purple gradients, uniform rounded corners, and over-relying on Inter. It will push back if you lean on those.

Composes with

• frontend-design — the design layer above this stack
• theme-factory — apply a coherent palette
• polish / arrange / typeset — the design suite for fine-tuning

Use web-artifacts-builder to make a kanban board artifact:
three columns, drag-drop tasks between them, persistent state in
localStorage, dark mode support. Bundle to a single HTML file.