web-artifacts-builder — Skills

What it does

✅ 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)

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.

Source

Repository: https://github.com/anthropics/skills

web-artifacts-builder FAQ

What does the web-artifacts-builder skill do?

How do I install web-artifacts-builder?

Run: npx -y skills add https://github.com/anthropics/skills --skill web-artifacts-builder --agent claude-code — the source lives at github.com/anthropics/skills.

Maintain web-artifacts-builder?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![web-artifacts-builder on getagentictools](https://getagentictools.com/badge/skills/anthropics-skills-web-artifacts-builder.svg)](https://getagentictools.com/skills/anthropics-skills-web-artifacts-builder?ref=badge)

npx agentictools info skills/anthropics-skills-web-artifacts-builder

The second line is the CLI lookup for this page — handy in READMEs and docs.