claudegoodies
Skill

web-artifacts-builder

From anthropics

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Scaffolds a React+Tailwind+shadcn/ui project and bundles it into one self-contained HTML claude.ai artifact.

Use it when

  • Building multi-component artifacts needing state management or routing
  • Artifact requires shadcn/ui components or Radix UI
  • Need a single self-contained HTML file to share as a claude.ai artifact

Skip it if

  • Artifact is simple single-file HTML/JSX (explicitly out of scope)
  • You don't want a React/Vite/Tailwind/shadcn stack imposed
  • Requires Node 18+ and shell script execution environment

Facts

Repository
anthropics/skills
Status
Actively maintained
Last commit
Source file
skills/web-artifacts-builder/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:
1. Initialize the frontend repo using `scripts/init-artifact.sh`
2. Develop your artifact by editing the generated code
3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
4. Display artifact to user
5. (Optional) Test the artifact

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

## Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

## Quick Start

### Step 1: Initialize Project

Run the initialization script to create a new React project:
```bash
bash scripts/init-artifact.sh <project-name>
cd <project-name>
```

This creates a fully configured project with:
- ✅ React + TypeScript (via Vite)
- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
- ✅ Path aliases (`@/`) configured
- ✅ 40+ shadcn/ui components pre-installed
- ✅ All Radix UI dependencies included
- ✅ Parcel configured for bundling (via .parcelrc)
- ✅ Node 18+ compatibility (auto-detects and pins Vite version)

### Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance.

### Step 3: Bundle to Single HTML File

To bundle the React app into a singl
View full source on GitHub →

Other skills