Artifacts Builder

A comprehensive toolkit for building complex, multi-component React artifacts for claude.ai. It provides a complete development stack including React 18, TypeScript, Vite, Tailwind CSS, and 40+ pre-installed shadcn/ui components. This skill is designed for elaborate frontend applications requiring state management, routing, or modern UI components - not simple single-file HTML/JSX artifacts.

The development workflow consists of three main steps:

1. Initialize Project - Run bash scripts/init-artifact.sh <project-name> to create a fully configured React + TypeScript project with all dependencies pre-installed, including Tailwind CSS, shadcn/ui theming, and path aliases.

2. Develop Your Artifact - Edit the generated files using React components, hooks, and shadcn/ui elements. The project comes with 40+ pre-installed components from shadcn/ui (buttons, forms, dialogs, tables, etc.) ready to use.

3. Bundle to Single HTML - Run bash scripts/bundle-artifact.sh to package everything into a single, self-contained HTML file with all JavaScript, CSS, and dependencies inlined. This creates bundle.html that can be directly shared as a claude.ai artifact.

The bundled artifact works immediately in Claude conversations with no setup required.