Skill Documentation Prototyping Software Delivery

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.

View on GitHub ☆ Save Report

★ 0 saves GitHub ★ 1.7k

Overview Setup Versions 0 Metadata Evals

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 @/ 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

Use it for

Building and shipping complex, interactive artifacts that would be unmanageable as a single hand-written file.