---
name: Artifacts Builder
description: Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui components
---

# Artifacts Builder

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

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:

*
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.

*
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.

*
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 aestheticsView on GitHub

### GitHub Stats
StarsForksLast UpdateAuthorAnthropicLicenseApache-2.0Version1.0.0

### Categories
Developer Tools

### Tags
reacttypescriptfrontendviteshadcn

### Features
⭐ Featured💻 Code Execution

## Related Skills
More from Developer Tools

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

23.0kVercelvercelnextjsreactedge00

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

5.3kAnthropicDeveloper Tools00

### Algorithmic Art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration

5.3kAnthropicCreativeDeveloper Tools00

---

**Source**: https://github.com/anthropics/skills/tree/main/artifacts-builder
**Author**: Anthropic
**License**: https://opensource.org/licenses/Apache-2.0
**GitHub Stars**: 5300
**Tags**: react, typescript, frontend, vite, shadcn