SKILL.md
Web Artifacts Builder
To build powerful frontend claude.ai artifacts, follow these steps:
- Initialize the frontend repo using
scripts/init-artifact.sh - Develop your artifact by editing the generated code
- Bundle all code into a single HTML file using
scripts/bundle-artifact.sh - Display artifact to user
- (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.