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.