Web Artifacts Builder

1. Initialize: scripts/init-artifact.sh <project-name>
2. Develop the artifact
3. Bundle: scripts/bundle-artifact.sh → bundle.html
4. Share the bundled HTML with user
5. (Optional) Test the artifact

Stack: React 19 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui v4

Design & Style Guidelines

Prefer distinctive layouts over generic defaults: vary spacing, use asymmetry, choose intentional color palettes, and pick fonts that match the artifact's purpose. Each artifact should feel hand-crafted.

Why: claude.ai artifacts are viewed side-by-side with conversation. Generic styling makes them look auto-generated and undermines user trust.

Commands