Web Artifacts Builder

Web Artifacts Builder

Build elaborate, multi-component claude.ai HTML artifacts with React 18, TypeScript, Tailwind CSS, and shadcn/ui.

Overview

This skill creates self-contained HTML artifacts from React projects. It scaffolds a Vite + React + TypeScript project with Tailwind CSS and 40+ pre-installed shadcn/ui components, develops the requested UI, bundles everything into a single HTML file via Parcel, and delivers it as a claude.ai artifact.

What it creates:

• Interactive dashboards with charts, tables, and filters
• Multi-step forms with validation (react-hook-form + zod)
• Data visualization apps with responsive layouts
• Landing pages with shadcn/ui component compositions
• Any complex frontend artifact requiring state management or routing

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

Prerequisites:

• Node.js 18+ (node -v to verify)
• pnpm (npm install -g pnpm if missing)

Workflow

Step 1: Scaffold the Project

Run the init script to create a configured React + Vite project:

SKILL_DIR="<path-to-this-skill>"
bash "$SKILL_DIR/scripts/init-artifact.sh" my-artifact
cd my-artifact

The scaffold includes:

• React 18 + TypeScript via Vite with @/ path aliases
• Tailwind CSS 3.4.1 with shadcn/ui HSL CSS variable theming
• 40+ shadcn/ui components (Accordion through Tooltip)
• All Radix UI primitives and utility libraries (clsx, tailwind-merge, lucide-react)
• Parcel bundler configuration with TypeScript path resolution

Step 2: Develop the Artifact

Edit source files under src/ to build the requested UI.

Entry point: src/App.tsx -- replace the default content with the artifact's root component.

Component organization:

src/
  App.tsx              # Root component
  components/
    ui/                # shadcn/ui primitives (pre-installed)
    feature-name.tsx   # Custom feature components
  lib/
    utils.ts           # cn() helper (pre-installed)
  hooks/
    use-feature.ts     # Custom hooks

Import patterns:

import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

State management: Use React built-in hooks (useState, useReducer, useContext) for artifact-scoped state. Avoid external state libraries -- the artifact must be self-contained.

Step 3: Bundle to Single HTML

Bundle the entire React app into one self-contained HTML file:

bash "$SKILL_DIR/scripts/bundle-artifact.sh"

This produces bundle.html with all JavaScript, CSS, and dependencies inlined. The file works standalone in any browser with no external requests.

How bundling works:

1. Installs Parcel + html-inline as dev dependencies
2. Creates .parcelrc with parcel-resolver-tspaths for @/ alias support
3. Runs parcel build index.html --no-source-maps to produce optimized dist/
4. Runs html-inline dist/index.html to inline all assets into bundle.html

Step 4: Share the Artifact

Read bundle.html and present it to the user as a claude.ai artifact. The user can view and interact with it directly in the conversation.

Step 5: Iterate (if needed)

If the user requests changes:

1. Edit the relevant src/ files
2. Re-run bash "$SKILL_DIR/scripts/bundle-artifact.sh"
3. Share the updated bundle.html

For visual testing before sharing, open bundle.html in a browser or use Playwright.

Design Guidelines

Avoid common AI-generated visual patterns ("AI slop"):

Use the shadcn/ui theming system (--background, --foreground, --primary, etc.) to maintain consistent color through CSS variables. See references/design-patterns.md for component composition recipes.

Available Components

All 40+ shadcn/ui components are pre-installed. Commonly used:

Full component list and props: references/shadcn-components.md

Examples

Example 1: Interactive Dashboard

User prompt: Build a sales dashboard with monthly revenue chart,
             top products table, and KPI cards

Steps taken:
  1. bash scripts/init-artifact.sh sales-dashboard
  2. Create src/components/kpi-card.tsx using Card + custom metrics
  3. Create src/components/revenue-chart.tsx with SVG bar chart
  4. Create src/components/products-table.tsx using Table component
  5. Wire everything in src/App.tsx with CSS grid layout
  6. bash scripts/bundle-artifact.sh
  7. Share bundle.html (142 KB)

Example 2: Multi-step Form

User prompt: Create a job application form with personal info,
             experience, and review steps

Steps taken:
  1. bash scripts/init-artifact.sh job-form
  2. Create src/components/form-steps.tsx with useReducer for step state
  3. Use Form, Input, Select, Textarea from shadcn/ui
  4. Add zod schema validation per step
  5. bash scripts/bundle-artifact.sh
  6. Share bundle.html (98 KB)

Example 3: Data Explorer

User prompt: Build a filterable data table with search, column sorting,
             and pagination

Steps taken:
  1. bash scripts/init-artifact.sh data-explorer
  2. Create src/hooks/use-table-state.ts for sort/filter/page state
  3. Create src/components/data-table.tsx using Table + Input + Select
  4. Add Command component for quick column search
  5. bash scripts/bundle-artifact.sh
  6. Share bundle.html (87 KB)

Output Checklist

After each artifact build, verify:

• bundle.html exists and is non-empty
• File opens correctly in a browser (no blank page)
• All interactive elements respond to clicks and input
• Layout is responsive (resize browser to test)
• No console errors in browser DevTools
• Styling matches the design guidelines (no AI slop patterns)
• Dark mode works if theme toggle is included
• All shadcn/ui components render with correct theming
• Bundle size is reasonable (under 500 KB for most artifacts)
• No external network requests (fully self-contained)

Troubleshooting