AutoGineer
Generated banner for Web Artifacts Builder
Generated logo for Web Artifacts Builder

Web Artifacts Builder

AnthropicOfficialPublished by Anthropic

  • Skill
  • Workflow
  • Software development
  • Apache-2.0
  • Medium risk
  • Has scripts
Get it from the source

From the author

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.
— the description by Anthropic

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The Web Artifacts Builder provides a standardized process for creating sophisticated, self-contained HTML artifacts. By leveraging React, TypeScript, Tailwind CSS, and shadcn/ui, it enables developers to build complex frontend applications that include state management and routing. The workflow includes automated project initialization and a bundling process that inlines all assets into a single HTML file, making it suitable for direct presentation within Claude conversations.

What it does

  • Initializes a pre-configured React project with TypeScript and Vite.
  • Provides access to over 40 pre-installed shadcn/ui components.
  • Configures path aliases and build settings for modern frontend development.
  • Bundles complex multi-file projects into a single, self-contained HTML file.
  • Inlines all CSS and JavaScript dependencies for seamless artifact rendering.

When to use it

  • When building complex artifacts that require state management or routing.
  • When you need to use shadcn/ui components in a Claude artifact.
  • When a single-file JSX approach is insufficient for your project requirements.
  • When you need to maintain a professional, non-generic design aesthetic.

Advantages

  • Enables the creation of full-featured web applications within an artifact.
  • Automates the complex bundling process required for multi-file projects.
  • Ensures consistent project structure and dependency management.
  • Reduces development overhead by providing a pre-configured environment.

Usage examples

“Initialize a new project named dashboard-app using the web-artifacts-builder.”
The agent runs the initialization script, setting up a React environment with Tailwind and shadcn/ui ready for development.
“Bundle my current project into a single HTML file for sharing.”
The agent executes the bundling script, which compiles the React app and inlines all assets into a single, shareable bundle.html file.

Install

  1. 1 of its files are not mirrored here, so install it from its source:

    https://github.com/anthropics/skills/tree/2c5958ecac7cee2b583967a2c4981d0f4a75c579/skills/web-artifacts-builder

Documentation by Anthropic

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

Files

SKILL.md

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

Requirements and compatibility

Written for: Claude Code, Claude apps

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

  • Archive files
  • Scripts that your agent may run

This skill includes scripts that your agent may run. Read them before you use it.

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by
Anthropic
Publisher
Anthropic (Official)
Source
anthropics/skills · skills/web-artifacts-builder · commit 2c5958e
Licence
Apache License 2.0 (redistribution allowed)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Anthropic.

Get it from the source

1 of this skill’s files are not mirrored here, so there is no ZIP. Get the complete skill from its source: anthropics/skills