| name | web-frontend |
| description | Use when building an elaborate multi-component claude.ai HTML artifact needing state, routing, or shadcn/ui — not for simple single-file artifacts. |
| license | Complete terms in LICENSE.txt |
Web Frontend
Tooling for React 18 + TypeScript + Vite + Tailwind + shadcn/ui artifacts, bundled to a single self-contained HTML file via Parcel. Use it for complex artifacts (state management, routing, shadcn/ui components); for a simple single-file HTML/JSX artifact, skip this and just write the file.
Design: avoid "AI slop"
VERY IMPORTANT: avoid excessive centered layouts, purple gradients, uniform rounded corners, and the Inter font.
Workflow
- Init:
bash scripts/init-artifact.sh <project-name> then cd <project-name>. Creates a fully configured project: React + TypeScript via Vite, Tailwind CSS 3.4.1 with the shadcn/ui theming system, 40+ shadcn/ui components pre-installed, all Radix UI deps, @/ path aliases, and Parcel bundling via .parcelrc. Auto-detects Node 18+ and pins a compatible Vite version.
- Develop: edit the generated files.
- Bundle:
bash scripts/bundle-artifact.sh — requires an index.html in the project root. Builds with Parcel (no source maps) and inlines all JS/CSS/assets into a single bundle.html.
- Share the
bundle.html as the artifact.
- Test (optional): only if requested or if issues arise — testing upfront adds latency before the user sees the artifact.
Reference
