Web Artefacts Builder

To build a frontend claude.ai artefact, follow these steps:

1. Initialise the frontend repo with scripts/init-artifact.sh
2. Pick a theme from resources/themes.css and apply it (see "Themes" below)
3. Develop your artefact by editing the generated code
4. Bundle to a single HTML file with scripts/bundle-artifact.sh
5. Share the bundled artefact with the user
6. (Optional) Test the artefact

Stack: React 19 + TypeScript + Vite 8 + Tailwind CSS v4 + shadcn/ui (new-york style) + lucide-react. Bundling via vite-plugin-singlefile. Requires Node 20.19+ or 22.12+.

Design principles

These principles are adapted from the html-design-examples skill. Load that skill alongside this one when you need patterns for specific artefact intents (status report, code review, PR write-up, design system page, editor, etc.); its rendered catalogue at resources/index.html indexes 20 single-file references.