| name | web-artifacts-builder |
| description | Suite of tools for creating elaborate, multi-component HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components. |
| version | 1.0.0 |
| author | Anthropic |
| license | Apache 2.0 |
| triggers | ["React artifact","complex HTML","shadcn/ui","multi-component","state management"] |
| tools | ["file_read","file_write","shell"] |
| models | ["qwen3-coder","qwen3-32b"] |
Web Artifacts Builder
Stack
React 18 + TypeScript + Vite + Tailwind CSS + shadcn/ui
Quick Start
Initialize Project
npm create vite@latest my-artifact -- --template react-ts
cd my-artifact
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Install shadcn/ui
npx shadcn-ui@latest init
Design Guidelines
Avoid "AI Slop":
- Excessive centered layouts
- Purple gradients
- Uniform rounded corners
- Inter font
Bundle to Single HTML
Use Parcel or Vite to bundle:
npm run build
Important Notes
Missing Scripts: scripts/init-artifact.sh and bundle-artifact.sh not included. Use manual setup as shown above.
Qwen Code Integration
Use /skills web-artifacts-builder to invoke.
