Free✓ Official
developmentFree✓ Official
web-artifacts-builder
Build complex React artifacts with Tailwind and shadcn/ui by bundling multi-component projects into single HTML files for seamless sharing.
12.4kdownloads·110.3kfavorites
A
by anthropicsBuild complex React artifacts with Tailwind and shadcn/ui by bundling multi-component projects into single HTML files for seamless sharing.
Stop struggling with single-file constraints when building complex, stateful web artifacts. This skill initializes a full React and TypeScript environment with Tailwind CSS and shadcn/ui, then bundles everything into one shareable HTML file. Use this when you need professional-grade interfaces with routing or state management instead of simple scripts. You avoid generic AI design patterns while leveraging 40+ pre-installed components for rapid development.
Copy the prompt below and paste it into OpenClaw:
Please follow the instructions at https://clawshelf.com/api/skills/anthropics-web-artifacts-builder/install to download and install this skill to the local ~/.openclaw/skills/ directory.
Package contents
---
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 conversatiNo reviews yet. Be the first to review this skill.
100% native OpenClaw / Claude support