Anthropic

Web Artifacts Builder — Development skill for Claude Code

Development official Advanced

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

How to install Web Artifacts Builder

Installs to ~/.claude/skills/web-artifacts-builder/

Terminal

git clone --depth 1 https://github.com/anthropics/skills /tmp/skills \
  && mkdir -p ~/.claude/skills \
  && cp -r /tmp/skills/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder

Clones the whole repository, because a skill folder can carry scripts and resources beside its SKILL.md.

What Web Artifacts Builder does

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using React 18, TypeScript, Vite, Parcel bundling, Tailwind CSS, and shadcn/ui. Includes initialization scripts and bundling into single HTML files.

The README for anthropics/skills is shared by 21 entries and is shown on algorithmic-art.

When Claude uses Web Artifacts Builder

Trigger

When building complex artifacts requiring state management, routing, or shadcn/ui components

Tools it reaches for:

BashWriteRead

Alternatives in Development

Lazycodex — The one and only agent harness for complex codebases 3.3k ★
Stitch Shadcn UI — Build UI components with shadcn/ui 2.6k ★
Astro — Astro 5.x components, routing, collections, i18n, SEO, Tailwind, React islands, transitions 2.6k ★