Prototype

Adapted from Anthropic's web-artifacts-builder skill

Create lightweight React prototypes that bundle to a single shareable HTML file.

When to Use This vs. Other Tools

Use prototype

Use audreygen

Use Astro

Quick prototype Full app Static site

Interactive demo Needs database Content-heavy

Shareable single file Needs API/auth Blog, docs

Claude artifacts Production app Marketing

Stack

• React 18 + TypeScript + Vite

• Tailwind CSS + shadcn/ui

• Parcel for bundling

• 40+ shadcn components pre-installed

Workflow

1. Initialize Project

bash scripts/init-artifact.sh my-demo cd my-demo pnpm dev

2. Develop

Edit files in src/ . All shadcn/ui components available:

import { Button } from '@/components/ui/button' import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card' import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'

3. Bundle to Single HTML

bash scripts/bundle-artifact.sh

Creates bundle.html

• single file with all JS/CSS inlined.

4. Share

• Open in browser

• Share file directly

• Paste into Claude.ai as artifact

Setup Required

Before first use, download the shadcn components tarball:

curl -L -o scripts/shadcn-components.tar.gz
https://github.com/anthropics/skills/raw/main/skills/web-artifacts-builder/scripts/shadcn-components.tar.gz

Design Notes

Same guidelines as your other projects:

• Use theme tokens (text-muted-foreground ) not hardcoded colors

• @/ imports

• No semicolons

• shadcn/ui patterns

For distinctive/creative UI, combine with the creative-design skill.