artifacts-builder

1# Artifacts Builder
2 
3To build powerful frontend claude.ai artifacts, follow these steps:
41. Initialize the frontend repo using `scripts/init-artifact.sh`
52. Develop your artifact by editing the generated code
63. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
74. Display artifact to user
85. (Optional) Test the artifact
9 
10**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
11 
12## Design & Style Guidelines
13 
14VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
15 
16## Quick Start
17 
18### Step 1: Initialize Project
19 
20Run the initialization script to create a new React project:
21```bash
22bash scripts/init-artifact.sh <project-name>
23cd <project-name>
24```
25 
26This creates a fully configured project with:
27- ✅ React + TypeScript (via Vite)
28- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
29- ✅ Path aliases (`@/`) configured
30- ✅ 40+ shadcn/ui components pre-installed
31- ✅ All Radix UI dependencies included
32- ✅ Parcel configured for bundling (via .parcelrc)
33- ✅ Node 18+ compatibility (auto-detects and pins Vite version)
34 
35### Step 2: Develop Your Artifact
36 
37To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance.
38 
39### Step 3: Bundle to Single HTML File
40 
41To bundle the React app into a single HTML artifact:
42```bash
43bash scripts/bundle-artifact.sh
44```
45…