Artifacts Builder
A Claude skill and script suite for building elaborate multi-component claude.ai HTML artifacts with React, Tailwind and shadcn/ui, then bundling everything into one self-contained file.
Installation & usage
README summary
A Claude skill and script suite for building elaborate multi-component claude.ai HTML artifacts with React, Tailwind and shadcn/ui, then bundling everything into one self-contained file.
A toolchain for powerful claude.ai HTML artifacts that need state, routing or shadcn/ui — beyond a single-file HTML/JSX artifact. scripts/init-artifact.sh — scaffolds React 18 + TypeScript + Vite with 40+ shadcn/ui components and @/ aliases. scripts/bundle-artifact.sh — bundles the app into one self-contained bundle.html (JS, CSS, deps inlined) via Parcel. Design guidance to avoid generic "AI slop" output. Building and shipping complex, interactive artifacts that would be unmanageable as a single hand-written file.
Auto-extracted from the repository README. The authoritative steps live in the repository on GitHub.
Full README
Artifacts Builder
A toolchain for powerful claude.ai HTML artifacts that need state, routing or shadcn/ui — beyond a single-file HTML/JSX artifact.
What's inside
scripts/init-artifact.sh— scaffolds React 18 + TypeScript + Vite with 40+ shadcn/ui components and@/aliasesscripts/bundle-artifact.sh— bundles the app into one self-containedbundle.html(JS, CSS, deps inlined) via Parcel- Design guidance to avoid generic "AI slop" output
Use it for
Building and shipping complex, interactive artifacts that would be unmanageable as a single hand-written file.