New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Web Artifacts Builder

by anthropics in anthropics/skills

Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

OfficialApache-2.0Auto-check passedFrontend & Design

Install Web Artifacts Builder

skills CLI
$ npx skills add anthropics/skills --skill web-artifacts-builder -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install anthropics/skills web-artifacts-builder --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/anthropics/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-artifacts-builder .claude/skills/web-artifacts-builder && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
web-artifacts-builder
GitHub stars
180k
Used in
40 other repos
Token cost
~769 tokens
SKILL.md length
351 words
Files
5 (incl. scripts)
Skills in repo
16
Repo updated
First seen
Licence
Apache-2.0

At a glance

Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

  • Works in 5 steps: Initialize Project → Develop Your Artifact → Bundle to Single HTML File → …
  • Building an interactive artifact with several components and shared state
  • SKILL.md covers Design & Style Guidelines, Quick Start and Reference
  • Runs Shell scripts from its folder; calls bash

What it does

This skill is for artifacts too complex for a single hand-written HTML or JSX file. A setup script (scripts/init-artifact.sh) scaffolds a React and TypeScript project on Vite with Tailwind CSS, path aliases and a set of shadcn/ui components, with the Radix UI dependencies already in place. You then edit that project like any frontend app, with state, routing and components.

When the artifact is ready, scripts/bundle-artifact.sh uses Parcel and html-inline to produce bundle.html with every script, stylesheet and dependency inlined, ready to share in a Claude conversation as an artifact. The project needs an index.html at its root. The styling advice steers away from centered layouts, purple gradients, uniform rounded corners and the Inter font, and browser testing of the result is treated as optional.

When your agent uses it

  • Building an interactive artifact with several components and shared state
  • An artifact needs routing or shadcn/ui components
  • Packaging a React prototype as one self-contained HTML file

Example prompts

  • “Build a claude.ai artifact for tracking my reading list with tabs and filters.”
  • “Make a dashboard artifact with a date picker and a sortable table.”
  • “Turn this React component into a single-file artifact I can share in chat.”

Requirements

  • Node.js 18 or later
  • Bash to run the init and bundle scripts

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Initialize Project
  2. Develop Your Artifact
  3. Bundle to Single HTML File
  4. Share Artifact with User
  5. Testing/Visualizing the Artifact (Optional)

What it can do on your machine

Read from SKILL.md and the folder at commit 683bc88. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 3 files in scripts/ (Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • bash

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • ui.shadcn.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Web Artifacts Builder loads about 769 tokens when it runs. Until then it costs about 78 tokens; SKILL.md has 351 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~78
When it runs · the whole SKILL.md, loaded when a task matches
~769

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from anthropics/skills at commit 683bc88, republished under its Apache-2.0 licence (© anthropics). 351 words, ~769 tokens.

Download SKILL.mdSave it as .claude/skills/web-artifacts-builder/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
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:

  1. Initialize the frontend repo using scripts/init-artifact.sh
  2. Develop your artifact by editing the generated code
  3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
  4. Display artifact to user
  5. (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
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
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
Show full SKILL.md (99 more words)Show less
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

© anthropics, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (scripts) in skills/web-artifacts-builder of anthropics/skills.

  • SKILL.md
  • LICENSE.txt
  • scripts/bundle-artifact.sh
  • scripts/init-artifact.sh
  • scripts/shadcn-components.tar.gz

Open the folder on GitHubat commit 683bc88

Used in at least 30 other repositories

We found 64 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 40 other GitHub owners. This page covers the copy in anthropics/skills, which our catalogue first saw on October 7, 2026.

…and 14 more copies not listed here.

Compare with similar skills

Web Artifacts Builder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Web Artifacts Builder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Web Artifacts Builder this skillanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
Shadcn Tailwind UILiarMTTT/TavernWeave148—~1.7kAutomated safety check: PassCustom licence
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Ss Learnbitjaru/styleseed970—~1.3kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2601 repos~5.7kAutomated safety check: PassCustom licence
Shadmin Devahaodev/shadmin174—~2.7kAutomated safety check: PassMIT

Similar skills

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    148 GitHub stars~1.7k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Ss Learn

    bitjaru/styleseed

    Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…

    970 GitHub stars~1.3k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    260 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Shadmin Dev

    ahaodev/shadmin

    Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS).

    174 GitHub stars~2.7k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Styleseed

    bitjaru/styleseed

    Build, improve, or inspect UI with StyleSeed. An agent skill from bitjaru/styleseed.

    970 GitHub stars~1.1k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

More from anthropics/skills

All 16 skills in this repo

  • MCP Server Builder

    anthropics/skills

    Official

    Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.

    180k GitHub starsUsed in 62 repos~2.3k tokens
    Auto-check passed

  • PDF Processing

    anthropics/skills

    Official

    Handles everyday PDF jobs in Python and on the command line: extract text and tables, merge, split, rotate, watermark, fill forms, encrypt and OCR.

    180k GitHub starsUsed in 48 repos~2k tokens
    Auto-check passed

  • Algorithmic Art with p5.js

    anthropics/skills

    Official

    Creates original generative art in two steps: a written algorithmic philosophy, then a p5.js sketch with seeded randomness and an interactive viewer for exploring parameters.

    180k GitHub starsUsed in 37 repos~4.9k tokens
    Auto-check passed

  • Canvas Design

    anthropics/skills

    Official

    Creates original posters and static art as PNG or PDF by first writing a short design philosophy, then expressing it visually on a canvas.

    180k GitHub starsUsed in 51 repos~3k tokens
    Auto-check passed

  • DOCX Creation and Editing

    anthropics/skills

    Official

    Creates, edits and reviews Word documents: new files with docx-js, edits through the underlying XML, plus tracked changes, comments and conversions.

    180k GitHub starsUsed in 6 repos~1.7k tokens
    Auto-check passed

  • Web Application Testing

    anthropics/skills

    Official

    Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.

    180k GitHub starsUsed in 51 repos~966 tokens
    Auto-check passed

Works with

Categories

Questions about Web Artifacts Builder

What does Web Artifacts Builder do?

Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file. This skill is for artifacts too complex for a single hand-written HTML or JSX file.sh) scaffolds a React and TypeScript project on Vite with Tailwind CSS, path aliases and a set of shadcn/ui components, with the Radix UI dependencies already in place.

When should I use Web Artifacts Builder?

Web Artifacts Builder fits situations like: building an interactive artifact with several components and shared state; an artifact needs routing or shadcn/ui components; packaging a React prototype as one self-contained HTML file.

How do I install Web Artifacts Builder in Claude Code?

Run `npx skills add anthropics/skills --skill web-artifacts-builder -a claude-code`. Or copy the skill folder (skills/web-artifacts-builder in anthropics/skills) into .claude/skills/web-artifacts-builder in your project. Claude Code loads it when a task matches its description.

How do I install Web Artifacts Builder in Codex?

Run `npx skills add anthropics/skills --skill web-artifacts-builder -a codex`. Or copy the skill folder (skills/web-artifacts-builder in anthropics/skills) into .agents/skills/web-artifacts-builder in your project. Codex loads it when a task matches its description.

Can I use Web Artifacts Builder in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add anthropics/skills --skill web-artifacts-builder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-artifacts-builder, .gemini/skills/web-artifacts-builder, .github/skills/web-artifacts-builder and .opencode/skills/web-artifacts-builder in your project.

What does Web Artifacts Builder need to run?

Going by SKILL.md and its folder, Web Artifacts Builder needs a shell for the scripts in its folder and the command-line tools its instructions call (bash). Our summary lists: Node.js 18 or later; Bash to run the init and bundle scripts.

Does Web Artifacts Builder access the network?

SKILL.md names 1 domain. As links in the text: ui.shadcn.com. This is read from the text; nothing was executed.

Is Web Artifacts Builder safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Web Artifacts Builder use?

Web Artifacts Builder is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Web Artifacts Builder use?

About 769 tokens (SKILL.md is roughly 3.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Web Artifacts Builder?

Skills that share tags, products or a category with Web Artifacts Builder: Shadcn Tailwind UI (LiarMTTT/TavernWeave, 148 stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Ss Learn (bitjaru/styleseed, 970 stars) and Animated React Component Libraries (Hainrixz/editor-pro-max, 260 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Web Artifacts Builder?

anthropics (a GitHub organization, an official publisher) maintains it in anthropics/skills, which has 179,935 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 5, 2026.

Source: anthropics/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.