#What it does

The Web Artifacts Builder skill creates elaborate, multi-component HTML artifacts for claude.ai using a modern frontend stack: React 18, TypeScript, Tailwind CSS, and 40+ pre-installed shadcn/ui components. It bundles everything into a single self-contained HTML file that works immediately as a Claude artifact or standalone in any browser.

#How to use

Activate for complex artifacts requiring state management, routing, or shadcn/ui components. Not needed for simple single-file HTML/JSX artifacts.

Build an interactive project management dashboard as a Claude artifact

Create a multi-page form wizard with validation as an artifact

#Skill instructions

#Stack

React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

#Workflow

1. Initialize: Run init-artifact.sh to create a fully configured project with React, TypeScript, Tailwind, path aliases, and 40+ shadcn/ui components pre-installed
2. Develop: Edit the generated code to build the artifact
3. Bundle: Run bundle-artifact.sh to produce a single bundle.html file with all JavaScript, CSS, and dependencies inlined
4. Share: Display the bundled HTML as a Claude artifact

#What You Get Out of the Box

• React + TypeScript via Vite
• Tailwind CSS 3.4.1 with shadcn/ui theming
• Path aliases (@/) configured
• 40+ shadcn/ui components with all Radix UI dependencies
• Parcel configured for single-file bundling
• Node 18+ compatibility

#Design Guidelines

Avoid "AI slop" aesthetics: no excessive centered layouts, purple gradients, uniform rounded corners, or Inter font. Create distinctive, visually compelling interfaces.

#Testing (Optional)

Use available tools like Playwright or Puppeteer to test the artifact. Testing is optional and should be done after presenting the artifact, not before.

This skill is from the Anthropic Skills Repository.