web-artifacts-builder

Official source

Scaffolds and bundles elaborate React + TypeScript + Tailwind + shadcn/ui artifacts into one self-contained HTML file for claude.ai, with state, routing, and prebuilt components.

Source: Anthropic

View source
Claude.ai · CompatibleClaude Code · CompatibleDevelopment

At a glance

Verified source
Best for
Building complex multi-component claude.ai artifacts needing state or routing
Works with
Claude.ai · Claude Code
Outcome
Using shadcn/ui components and Tailwind in a bundled single HTML output
Source
anthropics/skills
OverviewUse casesHow it worksInstall and useSimilar

01 / Understand the skill

About web-artifacts-builder

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.

02 / Confirm the fit

Use web-artifacts-builder when you need to

  • Building complex multi-component claude.ai artifacts needing state or routing
  • Using shadcn/ui components and Tailwind in a bundled single HTML output
  • Developers comfortable running init/bundle shell scripts

03 / See the workflow

How web-artifacts-builder works

  1. 01Install: npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder
  2. 02Try: Build a multi-tab dashboard artifact with shadcn cards and client routing.
  3. 03Get: A single bundle.html with all React/Tailwind/shadcn code inlined.

Check before installing

Compatible platforms

Claude.ai · Claude Code

Best fit

Building complex multi-component claude.ai artifacts needing state or routing

Review the source instructions if the required output differs from the formats described above.

Install and use

Compatible with Claude.ai and Claude Code · Published by Anthropic

Ready to add web-artifacts-builder?

Use the published instructions below, then provide the required input and describe the result you need.

General instructions · Claude.ai · Claude Code

npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

Review the source repository and license before installing third-party skills.

Continue exploring

Similar skills

claude-apiOfficial

Authoritative reference for the Claude API and Anthropic SDKs: model IDs, pricing, thinking/effort params, streaming, tool use, caching, managed agents, and model migration.

Works withClaude CodeClaude.ai
Development
View details
xlsxOfficial

Read, edit, create, and fix Excel/CSV files — formulas, formatting, charts, and clean financial models with zero formula errors.

Works withClaude CodeClaude.ai
Development
View details
frontend-designOfficial

Generate distinctive, production-grade frontend UI that avoids generic AI aesthetics — pages, components, dashboards, and landing pages.

Works withClaude CodeClaude.ai
Development
View details
mcp-builderOfficial

Build high-quality MCP (Model Context Protocol) servers in Python (FastMCP) or Node/TypeScript that let LLMs use external services through well-designed tools.

Works withClaude CodeClaude.ai
Development
View details