web-artifacts-builder

Use it when:: A claude.ai artifact, the interactive page Claude shows beside the chat, needs state, routing or shadcn/ui components.
It does:: Sets up a React and TypeScript project with Tailwind and 40+ shadcn/ui components, then bundles it into one file.
You get:: A self-contained bundle.html, with every script and style inlined, shown as an artifact in the chat.
Not for:: Simple artifacts that fit in a single HTML or JSX file.
Needs:: Node 18 or later and a shell to run its two scripts.

TL;DR

For claude.ai artifacts too complex to write as one file. One script creates a React 18 and TypeScript project with Tailwind CSS and over 40 shadcn/ui components already installed. The agent then builds the app by editing those files like any frontend project. When it's done, a second script inlines every script, style and asset into a single bundle.html, which you see as an artifact in the conversation. A design note warns against the usual AI look: everything centered, purple gradients, the same rounded corners everywhere, the Inter font. Testing in a browser is optional and comes after you've seen the result, so you aren't kept waiting.

Summarizes the skill at dbd4588.

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

skills.sh page Source on GitHub All skills from anthropics/skills

Total Downloads: 117,500 on skills.sh, Nov 9, 2026
Repo stars: 189,830 anthropics/skills
First seen: Jan 19, 2026 on skills.sh

Weekly Downloads

2.5K

+13% over the 8 weeks to Nov 9

Weekly values

Week to	Installs
Sep 21	2,187
Sep 28	1,772
Oct 5	1,995
Oct 12	2,169
Oct 19	2,290
Oct 26	2,545
Nov 2	2,396
Nov 9	2,466

Category	category:design category:software-engineering Taste for interfaces that don't look generated: direction, motion and accessibility. Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills.
Type	type:tool Operates a CLI, API, app or bundled script to get something done.
Effect	effect:local Its own steps create or change files, git state or local tools.
Needs	needs:claude-ai Built for claude.ai artifacts.
Publisher	by:official A verified publisher on skills.sh, or the company or maintainer behind the product the skill operates.
Topics	design prototyping
Stack	stack:react stack:tailwind stack:shadcn

SKILL.md

From anthropics/skills at dbd4588. Checked daily, last changed Oct 20, 2026.

Frontmatter

name: web-artifacts-builder
description: 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.
license: Complete terms in LICENSE.txt

Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

Initialize the frontend repo using scripts/init-artifact.sh
Develop your artifact by editing the generated code
Bundle all code into a single HTML file using scripts/bundle-artifact.sh
Display artifact to user
(Optional) Test the artifact

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

This creates a fully configured project with:

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

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

bash scripts/bundle-artifact.sh

This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.

Requirements: Your project must have an index.html in the root directory.

What the script does:

Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
Creates .parcelrc config with path alias support
Builds with Parcel (no source maps)
Inlines all assets into single HTML using html-inline

Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Only perform if necessary or requested.

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.

Reference

shadcn/ui components: https://ui.shadcn.com/docs/components