Build React artifacts as single-file HTML bundles

Web Artifacts Builder builds powerful frontend claude.ai artifacts on a React 18 + TypeScript + Vite + Parcel + Tailwind CSS + shadcn/ui stack, delivered as one self-contained HTML file. The design guideline is to avoid "AI slop" - excessive centered layouts, purple gradients, uniform rounded corners and Inter font.

The workflow is five steps: initialize the project, develop the artifact, bundle it to a single HTML file, share it with the user, and optionally test it. Initialization runs:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

The init script detects the installed Node version and requires 18+, refusing otherwise; it pins Vite to 5.4.11 below Node 20 or uses latest on Node 20+; installs pnpm if missing; scaffolds a Vite React-TypeScript project; strips the default favicon link and sets the page title; installs Tailwind CSS 3.4.1 with PostCSS, autoprefixer and tailwindcss-animate, plus class-variance-authority, clsx, tailwind-merge, lucide-react and next-themes; writes postcss.config.js, a tailwind.config.js with the full shadcn color-token theme (border, input, ring, background, primary/secondary/destructive/muted/accent/popover/card, each with a foreground variant) and accordion keyframe animations; writes src/index.css with light and dark HSL CSS variables for every token; adds @/* path aliases to tsconfig.json, tsconfig.app.json and vite.config.ts; installs the full set of Radix UI primitives plus sonner, cmdk, vaul, embla-carousel-react, react-day-picker, react-resizable-panels, date-fns, react-hook-form, @hookform/resolvers and zod; extracts a bundled shadcn-components.tar.gz into src/, giving over 40 pre-installed shadcn/ui components (accordion, alert, avatar, badge, button, calendar, card, carousel, checkbox, command, dialog, drawer, dropdown-menu, form, popover, select, sheet, table, tabs, toast, tooltip and more); and writes a components.json config with slate as the base color and CSS variables enabled.

Bundling runs bash scripts/bundle-artifact.sh, which requires package.json and index.html to already exist, installs parcel, @parcel/config-default, parcel-resolver-tspaths and html-inline, writes a .parcelrc extending the default config with the tspaths resolver, cleans any previous dist/bundle.html, builds with parcel build index.html --dist-dir dist --no-source-maps, then inlines every asset into one file with html-inline dist/index.html > bundle.html, reporting the final file size. The optional testing step deliberately comes last: the artifact is not tested upfront, since that adds latency between the request and the finished artifact being visible; testing comes later - with tools like Playwright or Puppeteer - only if requested or if an issue arises.

Use it whenever the task is to build a claude.ai frontend artifact that needs React components, Tailwind styling or a shadcn/ui component library, bundled into one shareable HTML file.

Input is a project name for initialization and the desired artifact's UI/behavior to develop into the generated project. Output is bundle.html, a self-contained artifact with all JavaScript, CSS and dependencies inlined, ready to share directly in a Claude conversation.

It suits anyone building a claude.ai artifact that needs real React component structure, consistent shadcn/ui theming and a single portable HTML output, rather than hand-rolled inline HTML/CSS/JS.