Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Build sophisticated web artifacts using React, TypeScript, Tailwind CSS, and shadcn/ui components.
scripts/init-artifact.sh <project-name>
Creates a fully configured React project with all dependencies.
Modify generated files using the pre-configured stack:
src/scripts/bundle-artifact.sh
Consolidates the React application into a single self-contained HTML file with all dependencies inlined.
Share the bundled HTML as a claude.ai artifact.
Avoid "AI slop" aesthetics:
Instead:
Use this skill for:
NOT for: