Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

1. Initialize the frontend repo using scripts/init-artifact.sh
2. Develop your artifact by editing the generated code
3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
4. Display artifact to user
5. (Optional) Test the artifact

Stack: version-selected React/TypeScript/Vite scaffold plus Parcel, Tailwind 3.x and a bundled shadcn-style component snapshot. Mixed snapshot/dependency versions require build verification.

Catalog modification notice: repaired initialization path/version handling, preserved existing outputs, and added explicit checks for the bundled component snapshot. The Apache-2.0 license text is retained. Archive members have no per-file upstream notices/pinned source in this tree; their full provenance/license compatibility is unresolved, so do not claim a complete third-party license audit.

Resolve scripts from the installed skill directory and run initialization in a disposable output parent. Install/build commands fetch packages and may run lifecycle scripts; review selected versions and preserve the lockfile. Supply an explicitly reviewed CREATE_VITE_VERSION and a compatible supported Node/pnpm toolchain. Never embed credentials/private data in client bundles; self-contained HTML still executes JavaScript and may request external resources.

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.