# Web Artifacts Builder

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

- Skill: `lidge-jun/web-artifacts-builder` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add lidge-jun/web-artifacts-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lidge-jun/web-artifacts-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Complete terms in LICENSE.txt
- Author: lidge-jun (https://skillmd.com/u/lidge-jun)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lidge-jun/web-artifacts-builder

---


# Web Artifacts Builder

1. Initialize: `scripts/init-artifact.sh <project-name>`
2. Develop the artifact
3. Bundle: `scripts/bundle-artifact.sh` → `bundle.html`
4. Share the bundled HTML with user
5. (Optional) Test the artifact

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

## Design & Style Guidelines

Prefer distinctive layouts over generic defaults: vary spacing, use asymmetry, choose intentional color palettes, and pick fonts that match the artifact's purpose. Each artifact should feel hand-crafted.

Why: claude.ai artifacts are viewed side-by-side with conversation. Generic styling makes them look auto-generated and undermines user trust.

## Commands

- **Init**: `bash scripts/init-artifact.sh <project-name>` — scaffolds React 19 + TS + Vite + Tailwind + 40+ shadcn/ui v4 components + Parcel bundling.
- **Bundle**: `bash scripts/bundle-artifact.sh` — produces `bundle.html` (requires `index.html` in project root). All JS/CSS inlined.
- **Test**: use Playwright/Puppeteer after sharing, not before — upfront testing adds latency the user feels.

Why bundle? Claude artifacts must be a single HTML file. Parcel inlines all dependencies so the artifact is self-contained.

## Reference

- **shadcn/ui components**: https://ui.shadcn.com/docs/components