artifacts-builderlisted

# Artifacts Builder To build powerful frontend artifacts, follow these steps: 1. Initialize a frontend repo (React + TypeScript + Tailwind + shadcn/ui) 2. Develop your artifact by editing the generated code 3. Bundle all code into a single HTML file 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 Create a new React + TypeScript project (e.g., via Vite) and add Tailwind CSS + shadcn/ui. Ensure: - ✅ React + TypeScript (via Vite) - ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system - ✅ Path aliases (`@/`) configured - ✅ 40+ shadcn/ui components pre-installed - ✅ All Radix UI dependencies included - ✅ Parcel configured for bundling (via .parcelrc) - ✅ Node 18+ compatibility (auto-detects and pins Vite version) ### Step 2: Develop Your Artifact To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance. ### Step 3: Bundle to Single HTML File Bundle the React app into a single HTML artifact using your preferred bundler (e.g., Parcel with html-inline) so all assets are inlined into `bundle.html`. Ensure your project has an `index.html` in the root directory. ### Step 4: Share Artifact with User Fi