artifacts-builder Agent Skills - Data & Analytics

🎯 What is Artifacts Builder?

Artifacts Builder is a powerful suite of tools designed to create elaborate, multi-component HTML artifacts for claude.ai using modern frontend technologies. It enables building complex, stateful applications with routing and rich UI components.

⚡ Key Features

• Initialize React + TypeScript + Vite projects quickly
• Use Tailwind CSS and shadcn/ui for styling
• Bundle entire app into a single sharable HTML file
• Supports 40+ pre-installed UI components via shadcn/ui
• Path aliasing and Radix UI dependencies pre-configured

🛠️ Tech Stack

React 18, TypeScript, Vite, Parcel bundler, Tailwind CSS, shadcn/ui, Radix UI

📋 Installation

Run `bash scripts/init-artifact.sh ` to scaffold a new project; develop your artifact by editing code; bundle with `bash scripts/bundle-artifact.sh` to create a self-contained HTML.

⚠️ Important Notes

Avoid overused styles like centered layouts, purple gradients, uniform rounded corners, and Inter font to prevent "AI slop" in the designs.

❓ Common Issues

Ensure `index.html` is present before bundling; testing is optional and should be done post-delivery to avoid latency delays; dependency installation is handled within bundling script.