A

Artifacts Builder

Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui components

byAnthropic
Home/Developer Tools/Artifacts Builder

What is it?

A comprehensive toolkit for building complex, multi-component React artifacts for claude.ai. It provides a complete development stack including React 18, TypeScript, Vite, Tailwind CSS, and 40+ pre-installed shadcn/ui components. This skill is designed for elaborate frontend applications requiring state management, routing, or modern UI components - not simple single-file HTML/JSX artifacts.

How to use it?

The development workflow consists of three main steps:

  1. Initialize Project - Run bash scripts/init-artifact.sh <project-name> to create a fully configured React + TypeScript project with all dependencies pre-installed, including Tailwind CSS, shadcn/ui theming, and path aliases.

  2. Develop Your Artifact - Edit the generated files using React components, hooks, and shadcn/ui elements. The project comes with 40+ pre-installed components from shadcn/ui (buttons, forms, dialogs, tables, etc.) ready to use.

  3. Bundle to Single HTML - Run bash scripts/bundle-artifact.sh to package everything into a single, self-contained HTML file with all JavaScript, CSS, and dependencies inlined. This creates bundle.html that can be directly shared as a claude.ai artifact.

The bundled artifact works immediately in Claude conversations with no setup required.

Key Features

  • Complete React 18 + TypeScript stack with Vite build tooling
  • 40+ shadcn/ui components pre-installed (buttons, forms, dialogs, tables, charts, etc.)
  • Tailwind CSS 3.4.1 with shadcn/ui theming system for consistent styling
  • Path aliases (@/) pre-configured for clean imports
  • Automatic bundling to single HTML file with all dependencies inlined
  • Node 18+ compatibility with automatic Vite version detection
  • Design guidelines to avoid common AI-generated aesthetics
View on GitHub

GitHub Stats

Stars
Forks
Last Update
Author
Anthropic
License
Apache-2.0
Version
1.0.0

Categories

Developer Tools

Tags

react
typescript
frontend
vite
shadcn

Features

💻 Code Execution

Related Skills

More from Developer Tools

Vercel Skills

8 official Vercel skills for Next.js, React, and edge deployment

28.6kVercel
vercel
nextjs
react
edge

MCP Builder

Guide for creating high-quality MCP servers to integrate external APIs and services

157.7kAnthropic
Developer Tools

Web App Testing

Test local web applications using Playwright for UI verification and debugging

157.7kAnthropic
Developer Tools

Download Artifacts Builder

Artifacts Builder is free and open source. Download it from the official source repository — clone it with git or use GitHub's Download ZIP option on the repo page — then copy the skill folder into your project's .claude/skills/ directory to install it.

If you are an AI agent

Query this directory over HTTP

This site is a searchable directory of harness components for AI coding agents. Fetch objective JSON — names, descriptions, stars, and source links. Installation and selection are yours to decide.

GET https://claudeskills.info/api/v1/search?q=ui%2Fux
GET https://claudeskills.info/api/v1/search?type=subagent&q=review
GET https://claudeskills.info/api/v1/meta
See https://claudeskills.info/llms.txt