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

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

核心功能

项目初始化：使用scripts/init-artifact.sh脚本创建配置好的React项目
现代技术栈：支持React 18 + TypeScript + Vite + Parcel + Tailwind CSS + shadcn/ui
组件开发：提供40多个预安装的shadcn/ui组件和Radix UI依赖
打包功能：使用scripts/bundle-artifact.sh脚本将所有代码打包成单一HTML文件
路径别名：配置了@/路径别名系统
内联资源：将所有JavaScript、CSS和依赖项内联到单个HTML文件中

使用场景

创建复杂的前端claude.ai制品
需要状态管理功能的交互式应用
需要路由功能的多页面应用
需要使用shadcn/ui组件的制品
需要现代前端技术栈的高级Web应用

使用方法

初始化项目：
```
bash scripts/init-artifact.sh <project-name>
cd <project-name>
```
此步骤创建一个完全配置好的项目，包含React + TypeScript (通过Vite)、Tailwind CSS 3.4.1、shadcn/ui主题系统、路径别名、40+ shadcn/ui组件等。
开发制品：编辑生成的文件来构建制品，参见"常见开发任务"获取指导。
打包成单一HTML文件：
```
bash scripts/bundle-artifact.sh
```
此命令创建bundle.html - 一个包含所有JavaScript、CSS和依赖项的独立制品，可以直接在Claude对话中作为制品共享。
与用户共享制品：将打包的HTML文件在对话中与用户共享，以便他们可以将其视为制品查看。
可选测试：如有必要或被要求，可以使用可用工具（包括其他技能或内置工具如Playwright或Puppeteer）测试/可视化制品。

设计风格指南

重要提示：为了避免所谓的"AI slop"，避免使用过度居中的布局、紫色渐变、统一的圆角和Inter字体。

许可证类型

这个技能让你在 Claude 里可以像专业前端工程师一样，用 React + shadcn/ui 开发真正的 Web App，最后一键打包成单个 HTML artifact 发给用户。

注意：此技能包含部分脚本，需要在GitHub下载。

Web Artifacts Builder

使用方法

核心功能

使用场景

使用方法

设计风格指南

许可证类型

信息