# Web Artifacts Builder

> Suite of tools for creating elaborate, multi-component web applications using modern frontend technologies (React, Tailwind CSS, shadcn/ui). Use for complex apps requiring state management, routing, or shadcn/ui components.

- Skill: `majiayu000/web-artifacts-builder-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/web-artifacts-builder-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/web-artifacts-builder-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/web-artifacts-builder-3

---


# Web Artifacts Builder

Build powerful self-contained frontend applications:
1. Initialize the project using `scripts/init-artifact.sh`
2. Develop the application by editing the generated code
3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
4. Deliver to user
5. (Optional) Test the output

**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

## Design & Style Guidelines

Avoid generic "AI slop": no excessive centered layouts, purple gradients, uniform rounded corners, or Inter font.

## Quick Start

### Step 1: Initialize 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)

### Step 2: Develop

Edit the generated files. See **Common Development Tasks** below for guidance.

### Step 3: Bundle to Single HTML File

```bash
bash scripts/bundle-artifact.sh
```

Creates `bundle.html` — a self-contained file with all JavaScript, CSS, and dependencies inlined.

**What the script does**:
- Installs bundling dependencies (parcel, html-inline)
- Creates `.parcelrc` config with path alias support
- Builds with Parcel (no source maps)
- Inlines all assets into single HTML

### Step 4: Deliver

Share the bundled HTML file with the user.

### Step 5: Testing (Optional)

Use Playwright or browser tools to verify the output. Avoid testing upfront unless issues arise.