102.7K+Download
Skip to the usage guide
web-artifacts-builderby Anthropic

Web Artifacts Builder Skill.

A Claude Code and Codex skill for UI design: multi-component interactive HTML artifacts with React, Tailwind, and shadcn/ui.

  • Web & UI
  • HTML
Download OpenDesignView usage guide
anthropics/skills · skills/web-artifacts-builder/SKILL.mdSKILL.md
--- 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. --- ## Design & Style Guidelines ## Quick Start
Front matter and section headings read from the upstream file on 2026-09-14 · 3,073 characters in full

01 What it does

What the web-artifacts-builder Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A skill for building complex, multi-component React artifacts for claude.ai using a modern stack of React 18, TypeScript, Vite, Parcel, Tailwind CSS, and shadcn/ui. The skill provides initialization scripts to set up a fully configured project with 40+ pre-installed shadcn/ui components and bundling scripts to compile everything into a single self-contained HTML file.

It is designed for artifacts requiring state management, routing, or shadcn/ui components, not for simple single-file HTML or JSX artifacts. The workflow follows five steps: initialize the frontend repo, develop the artifact by editing generated code, bundle into a single HTML file, display to the user, and optionally test.

What it produces

  • Editable React/TypeScript project source initialized by the bundled script
  • A bundle.html file with the application code and bundled assets inlined
See the example prompt ↗

How It Works

  1. 01
    Initialize a Configured React Project

    Run the init-artifact.sh script with a project name to create a fully configured project with React, TypeScript, Tailwind CSS, path aliases, 40+ shadcn/ui components, and Parcel bundling configuration.

  2. 02
    Develop by Editing Generated Files

    Edit the generated React/TypeScript project to implement the requested state, navigation and components. The entry gives the setup and bundling sequence, not a complete feature implementation.

  3. 03
    Bundle into self-contained HTML

    Run bundle-artifact.sh to compile the React app into bundle.html, a single file with all JavaScript, CSS, and dependencies inlined using Parcel and html-inline.

  4. 04
    Display the Artifact to the User

    Share the bundled HTML file in the conversation so the user can view it as a claude.ai artifact.

02 Find your fit

When to Use the web-artifacts-builder Skill

Use the web-artifacts-builder skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Multi-component interfaces using shadcn/ui component library

Know the Boundaries

  • Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
  • Bundled HTML is not a tested applicationThe source marks testing optional and was written for claude.ai artifacts. Local agents can work with the project and HTML file, but host display support and actual behavior need separate checks. External services used by your app are not made offline by bundling.

What to Provide

  • Project name for initializationA name for the new React project directory when running the init-artifact.sh script.
  • Artifact brief and local build environmentProvide the required screens, interactions and data. Have the full scripts directory, a compatible Node runtime and package-install access available; the source states Node 18+ compatibility for its captured setup.

03 Inside the skill

Rules the web-artifacts-builder Skill Gives Claude Code and Codex

5 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Use for Complex Artifacts Only

    This skill is specifically for complex artifacts requiring state management, routing, or shadcn/ui components. Do not use it for simple single-file HTML or JSX artifacts.

  2. Avoid AI Slop Design Patterns

    Do not use excessive centered layouts, purple gradients, uniform rounded corners, or Inter font in order to avoid what is referred to as AI slop.

  3. Project Must Have Root index.html

    The bundling script requires that your project has an index.html file located in the root directory.

  4. Test Only When Necessary

    Testing is completely optional and should only be performed if necessary or requested.

  5. Follow five-step Workflow

    The artifact building process follows a specific sequence: initialize the frontend repo, develop by editing generated code, bundle all code into a single HTML file, display to user, and optionally test.

04 Put it to work

Install web-artifacts-builder in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add web-artifacts-builder to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

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

Generic skills CLI form for skills/web-artifacts-builder/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Build a task management dashboard artifact with a sidebar navigation, data table showing tasks with status filters, and a modal form for adding new tasks. Use shadcn/ui components for the table, dialog, and form elements. Include state management for the task list and filtering logic.

Editorial example based on the reviewed source; not an executed task or an upstream quotation.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Use available tools like Playwright or Puppeteer to test or visualize the artifact if requested or if issues arise
  • Verify the design avoids excessive centered layouts, purple gradients, uniform rounded corners, and Inter font
  • Open bundle.html and exercise the requested interactions before relying on it; distinguish successful bundling from actual behavior checks.

OpenDesign provides a local workspace for coding agents. Check the installed version for skill availability and setup; this source review does not verify bundled skills or include external tools and services.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
Skill file
skills/web-artifacts-builder/SKILL.md Content checksum recorded at verification; commit 34040c9
License
Apache-2.0 From skills/web-artifacts-builder/LICENSE.txt; SKILL.md says “Complete terms in LICENSE.txt”.
Repository stars
176,183 GitHub snapshot taken 2026-09-14 for the whole anthropics/skills repository, which contains 7 skills in this catalog. Not a rating or usage count for web-artifacts-builder.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Design & Style GuidelinesInstructions to avoid AI slop patterns like excessive centering, purple gradients, uniform rounded corners, and Inter font
  2. Quick StartFive-step workflow from initialization through development, bundling, sharing, and optional testing
  3. Step 1: Initialize ProjectRun init-artifact.sh to create configured React project with TypeScript, Tailwind, shadcn/ui components, and Parcel
  4. Step 2: Develop Your ArtifactEdit generated files to build the artifact following common development tasks guidance
  5. Step 3: Bundle to Single HTML FileRun bundle-artifact.sh to create self-contained bundle.html with inlined JavaScript, CSS, and dependencies
  6. Step 4: Share Artifact with UserShare the bundled HTML file in conversation for viewing as an artifact
  7. Step 5: Testing/Visualizing the Artifact (Optional)Optional testing with tools like Playwright or Puppeteer, avoiding upfront testing to reduce latency
  8. ReferenceLink to shadcn/ui components documentation
The Skill's Own 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.”

Front-matter description from SKILL.md. The full file is about 3,073 characters. Read the full file on GitHub.

06 Before you install

Questions About the web-artifacts-builder Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What components and libraries are already installed?

The initialization script creates a project with React 18, TypeScript via Vite, Tailwind CSS 3.4.1 with shadcn/ui theming, 40+ shadcn/ui components pre-installed, all Radix UI dependencies, and Parcel configured for bundling. Path aliases are configured so you can import using the at-slash prefix.

Web Artifacts Builder

Run web-artifacts-builder on a Real UI Design Task.

The web-artifacts-builder skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder