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.
Artifacts Builder To build powerful frontend claude.ai artifacts, follow these steps: 1. Initialize the frontend repo using 2. Develop your artifact by editing the generated code 3. Bundle all code into a single HTML file using 4. Display artifact to user 5. (Optional) Test the artifact Stack : React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui Design & Style Guidelines VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered…
Full body not shown for this license – view the source on GitHub →Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/artifacts-builder · pinned to the source commit
git clone https://github.com/ComposioHQ/awesome-claude-skills.git
cd awesome-claude-skills
git checkout be2a406907dbc61b73e6827ded415c96139d13a2
mkdir -p ".claude/skills/artifacts-builder"
cp -r "artifacts-builder" ".claude/skills/artifacts-builder"Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
Scanner static-checks@0.1.0 · commit be2a406907db. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
No static rules matched. This is not a safety guarantee.