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.