artifacts-builder
CommunityInstallation
Terminal
git clone --depth 1 https://github.com/ComposioHQ/awesome-claude-skills.git /tmp/artifacts-builder-src cp -r /tmp/artifacts-builder-src/artifacts-builder ~/.claude/skills/artifacts-builder
Or .claude/skills/artifacts-builder to scope it to one repo.
Summary
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 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: 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 layouts, purple gradients, uniform rounded corners, and Inter font. Quick Start Step 1: Initialize Project Run the initialization script to create a new React project: bash bash scripts/init-artifact.sh <project-name cd <project-name This creates a fully configured project with: - ✅ React + TypeScript (via Vite) - ✅ Tailwind CSS 3.4.1 with shadcn/ui the…