web-artifacts-builder

verified	true
lastVerifiedAt	"2026-03-05T00:00:00.000Z"
name	web-artifacts-builder
description	Build elaborate, multi-component web artifacts using React 18 + TypeScript + Tailwind CSS + shadcn/ui. Produces a single self-contained HTML file with all assets inlined. Use for complex artifacts requiring state management, routing, or shadcn/ui components. NOT for simple single-file HTML/JSX.
version	1.0.0
model	sonnet
invoked_by	both
user_invocable	true
tools	["Read","Write","Edit","Bash","Glob","Grep"]
agents	["frontend-pro","developer","nextjs-pro"]
category	frontend
tags	["react","typescript","tailwind","shadcn","artifacts","html","bundle","vite","parcel"]
aliases	["artifact-builder","react-artifact","web-artifact"]
best_practices	["Initialize with init-artifact.sh before any code","Use shadcn/ui components from the pre-installed catalog","Bundle with bundle-artifact.sh to get single-file HTML output","Avoid Inter font, purple gradients, centered layouts (AI slop)","Present artifact first, test only if issues arise","Keep all state in React — no external APIs unless explicitly requested"]
error_handling	strict
streaming	supported
source	builtin
trust_score	100
provenance_sha	3a18fe16895a3c27

Web Artifacts Builder

"Build powerful, multi-component web artifacts deployable directly in Claude conversations."

Overview

This skill enables building elaborate React applications that bundle into a single self-contained HTML file. The output is deployable as a Claude artifact or shared as a standalone file with all JavaScript, CSS, and dependencies inlined.

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS 3.4.1 + shadcn/ui

When to Invoke

Use this skill when:

• Building an interactive tool, calculator, dashboard, or form
• The artifact needs React state management (not a static page)
• The artifact uses shadcn/ui components (buttons, dialogs, tables, etc.)
• Multiple components with routing or complex interactions
• User says "build me an artifact" or "create a React app"

Do NOT use for simple single-file HTML artifacts — just write the HTML directly.

Five-Step Workflow

Step 1: Initialize Project

bash scripts/init-artifact.sh <project-name>
cd <project-name>

The scripts/init-artifact.sh script creates a fully configured project:

• React 18 + TypeScript (via Vite)
• Tailwind CSS 3.4.1 with shadcn/ui theming
• Path aliases (@/) configured
• 40+ shadcn/ui components pre-installed
• All Radix UI dependencies included
• Parcel configured for bundling via .parcelrc
• Node 18+ compatibility (auto-pins Vite version)

After init, project structure:

<project-name>/
├── src/
│   ├── App.tsx          # Main application component
│   ├── main.tsx         # Entry point
│   └── components/      # Your components here
├── index.html           # Entry HTML (required for bundling)
├── package.json
├── tailwind.config.js
└── tsconfig.json

Step 2: Develop the Artifact

Edit the generated files. Key patterns:

Using shadcn/ui Components

All 40+ components are pre-installed. Import directly:

import { Button } from '@/components/ui/button';
import { Card, , ,  }  ;
 {  }  ;
 {  }  ;
 {
  ,
  ,
  ,
  ,
  ,
}  ;

  () {
   (
    
  );
}