web-artifacts-builder

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.