Build React artifacts as single-file HTML bundles

Web Artifacts Builder scaffolds, develops, and bundles a React frontend into a single self-contained HTML file suitable for sharing as a claude.ai artifact. scripts/init-artifact.sh <project-name> creates a fully configured React and TypeScript project on Vite, with Tailwind CSS 3.4.1 and a shadcn/ui theming system, 40+ pre-installed shadcn/ui components and their Radix UI dependencies, @/ path aliases, Parcel pre-configured for bundling, and automatic Node 18+ version pinning for Vite. After development, scripts/bundle-artifact.sh installs the bundling dependencies (Parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline), builds with Parcel without source maps, and inlines every JavaScript, CSS, and asset dependency into a single bundle.html file - the artifact that gets shared with the user. It explicitly warns against "AI slop" visual defaults: excessive centered layouts, purple gradients, uniform rounded corners, and the Inter font.

Use it when building a frontend claude.ai artifact with React, TypeScript, and shadcn/ui components that needs to end up as one portable HTML file. Testing or visualizing the artifact, with Playwright, Puppeteer, or another skill, is explicitly optional and should generally be skipped up front, since it adds latency between the request and the finished artifact - test afterward, only if requested or if issues come up. Bundling requires an index.html in the project root; without one, bundle-artifact.sh has nothing to build from.

Input: a project name for initialization, and the artifact's source code developed inside the generated project structure. Output: bundle.html, a single, self-contained HTML file with all JavaScript, CSS, and dependencies inlined, ready to share directly in a Claude conversation.

• React 18, TypeScript, and Vite for development
• Tailwind CSS and shadcn/ui, 40+ components plus Radix UI, for styling and UI primitives
• Parcel and html-inline for producing the single-file bundle
• shadcn/ui component reference at https://ui.shadcn.com/docs/components

The overall workflow is five steps: initialize the project, develop the artifact by editing the generated code, bundle everything into a single HTML file, share that file with the user, and only then optionally test or visualize it if needed. The stated stack for the whole workflow is React 18, TypeScript, Vite, Parcel for bundling, Tailwind CSS, and shadcn/ui, and the development step points to a separate "Common Development Tasks" reference for guidance on editing the generated project once it's running.

Anyone building a React-based claude.ai artifact who wants a pre-configured stack and a one-command path to a single shareable HTML file, without hand-wiring Vite, Tailwind, shadcn/ui, and a bundler themselves.