Module 1.3 — web-artifacts-builder | Skill Design

🧩 What it is / what it does

Precise definition

O web-artifacts-builder is a suite of tools for creating claude.ai artifacts elaborate and multi-component using modern frontend technologies: React 18 + TypeScript + Tailwind CSS + shadcn/ui. It's not for simple HTML — use it when you need state, routes, modals, tabs, sliders, and the full range of Radix UI components.

✓ What it does

✓ Initializes a React+TS project via init-artifact.sh
✓ Provides 40+ preinstalled shadcn/ui components
✓ Configures path aliases (@/) automatically
✓ Packages everything into a single bundle.html via Parcel + html-inline
✓ Generates a self-contained artifact ready to paste into claude.ai

✗ What it is NOT

✗ Not for simple single-file HTML/JSX
✗ Not for static artifacts without interactivity
✗ Doesn't replace the skill frontend-design for straightforward HTML/Tailwind pages
✗ Not for server deployment — generates an artifact for claude.ai

Complete stack

React 18UI engine

TypeScriptvia Vite

Tailwind 3.4.1+ shadcn theming

Parcelbundling

artifact

Self-contained HTML

multi-component

shadcn/ui + Radix

bundle.html

everything inline

context: fork

local skill

🎣 When it triggers

Golden rule

Use web-artifacts-builder whenever the artifact needs state (useState/useReducer), routes, or shadcn/ui components. For simple HTML with Tailwind built in, use the skill frontend-design.

Decision flow: do I need web-artifacts-builder?

Does the artifact have multiple screens or tabs with their own state?

→ YES: use web-artifacts-builder

Need shadcn/ui components (Dialogs, Tooltips, Selects, Toasts)?

→ YES: use web-artifacts-builder

Is it an interactive data visualization (dashboards, charts, complex forms)?

→ Probably YES

Is it a landing page, card, simple modal, or static HTML?

→ NO: use frontend-design or direct HTML

✓ Use when...

• The request mentions "dashboard," "app," "wizard," or "stepper"
• Artifact will have simulated authentication or multiple steps
• Client wants Radix components (Accordion, Command, etc.)
• Complex project with many files .tsx

✗ Do not use when...

• Artifact is a single JSX block with no state
• The request is "create a nice card" or "style this HTML"
• No complex state manipulation or events
• The deadline is short, and simple HTML/Tailwind will do the job

trigger

state + shadcn

multi-screen

routes / steps

elaborate

not single-file

complexity

central criterion

🚀 How it improves your artifacts

🏗️

Real app structure

Instead of JSX in a single file, you have separate components, custom hooks, and a scalable architecture — Claude Code manages each file individually.

🎨

Production UI

The 40+ shadcn/ui components ensure visual consistency and accessibility effortlessly. Radix UI handles focus trapping, ARIA, and keyboard navigation under the hood.

📦

Clean delivery

O bundle.html generated by Parcel + html-inline is completely self-contained — zero external dependencies for the artifact user.

Design guideline included

The SKILL.md includes a critical guideline: "To avoid what is often referred to as 'AI slop', avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font." The result is artifacts with a stronger, less generic visual identity.

✓ Results you get

✓ Dashboards with charts, filters, and persistent state
✓ Multi-step wizards with per-step validation
✓ Data tables with sorting, pagination, and search
✓ Command palettes, drawers, shadcn sheets
✓ Dark/light mode with correct CSS tokens

✗ Without the skill, you would have

✗ Single 800+ line JSX file that's impossible to edit
✗ React CDN without bundling — no tree shaking
✗ Radix components implemented from scratch
✗ Generic “AI slop” layout with no identity

shadcn/ui

40+ components

Radix UI

accessibility

anti-slop

design guideline

tree shaking

Parcel optimizes

⚙️ How it works under the hood

Complete 5-step pipeline

init-artifact.sh <project-name>

Creates a React+TS project via Vite, installs Tailwind 3.4.1 with shadcn's theming system, configures @/ as a path alias, pre-installs 40+ shadcn components and all Radix UI dependencies. Auto-detects Node 18+ and pins the Vite version if needed.

Component development

Claude Code edits the files .tsx usually. Each component lives in its own file. Imports use @/components/ui/.... Tailwind and shadcn CSS tokens are available globally.

bundle-artifact.sh

Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline). Creates .parcelrc with support for path aliases. Builds with Parcel without source maps. Uses html-inline to embed all JS/CSS in the final HTML.

bundle.html → Claude.ai artifact

The resulting file bundle.html is completely self-contained — no external requests. Claude Code presents the artifact directly to the user.

(Optional) Test with Playwright/Puppeteer

Optional step — run only if there are problems or if the user asks. Avoid doing it upfront because it adds unnecessary latency before delivery.

Actual dependencies of the generated project

Build

vite (auto-version)
parcel
html-inline
parcel-resolver-tspaths

react@18
tailwindcss@3.4.1
shadcn/ui (40+)
@radix-ui/*

Config

.parcelrc
tsconfig.json (paths)
tailwind.config.js
components.json

Vite

TS dev server

Parcel

final bundling

html-inline

embed assets

.parcelrc

path aliases

💬 Practical example + Ready-to-use PROMPT

Scenario: Metrics dashboard with filters and chart

You want an artifact with a filter sidebar, interactive timeline, KPI cards, and a details modal. Shared state across components, native dark mode. Clearly a case for web-artifacts-builder.

PROMPT — paste into Claude Code web-artifacts-builder

Crie um artifact claude.ai com dashboard de métricas de produto.

Requisitos:
- Sidebar com filtros de período (7d / 30d / 90d)
- 4 cards de KPI (usuários, sessões, conversão, receita)
- Gráfico de linha de tendência (simulado com dados mock)
- Modal de detalhes ao clicar num KPI
- Dark mode nativo com tokens shadcn/ui

Use o skill web-artifacts-builder:
1. Inicialize com scripts/init-artifact.sh dashboard-metricas
2. Crie os componentes em src/components/
3. Use shadcn/ui: Card, Dialog, Button, Select, Badge
4. Gere o bundle final com scripts/bundle-artifact.sh
5. Apresente o bundle.html como artifact

Tip: structure of the generated project

dashboard-metricas/
├── src/
│   ├── App.tsx
│   ├── components/
│   │   ├── ui/           ← shadcn/ui (40+ componentes)
│   │   ├── Sidebar.tsx
│   │   ├── KPICard.tsx
│   │   └── DetailModal.tsx
│   └── main.tsx
├── index.html            ← obrigatório para bundle
├── tailwind.config.js
└── .parcelrc             ← gerado pelo bundle-artifact.sh

Warning: index.html required

O bundle-artifact.sh requires an existing index.html in the project root. The init-artifact.sh created automatically — don't delete.

clear prompt

lists components

mock data

no real API

shadcn list

specify the components

final bundle

always at the end

🧬 Works well with / limitations

🎨 + frontend-design

The most powerful combo in Track 1. Use frontend-design to define the visual language — grid, typography, spacing, palette — and web-artifacts-builder to execute that vision in React. design-designer can specify the design system before the build.

frontend-design → visual system
web-artifacts-builder → React implementation

🎨 + theme-factory

O theme-factory (Track 2) generates consistent color, typography, and shadow tokens. These tokens can be imported directly into tailwind.config.js from the project generated by web-artifacts-builder, ensuring brand identity in the artifact.

theme-factory → brand tokens
web-artifacts-builder → applies to the Tailwind config

Position in the skills ecosystem

BEFORE (Track 1)

frontend-design — defines the aesthetic

impeccable — refines visual quality

YOU ARE HERE

web-artifacts-builder

multi-component React implementation

PAIRS WITH (Track 2)

theme-factory — color tokens

brand-guidelines — identity

Real limitations of the skill

✗ Doesn't generate a deploy — only a local artifact
✗ The bundle may be heavy for very large artifacts
✗ Requires Node 18+ on the user's machine

✗ Doesn't support real API calls (sandboxed artifact)
✗ context: fork — local skill, not cloud
✗ Isn't suitable for simple artifacts (unnecessary overhead)

Design-designer as specifier

The skill design-designer (Module 1.4 of this track) defines the visual specification before implementation. Recommended workflow for high-quality artifacts: design-designer (moodboard + spec) → frontend-design (review) → web-artifacts-builder (React build).

frontend-design

Complementary T1

theme-factory

Tailwind tokens

design-designer

spec before build

context: fork

local only

📋 Module 1.3 Summary

What you learned

✓ web-artifacts-builder is a suite for multi-component React artifacts on claude.ai
✓ Stack: React 18 + TypeScript + Vite + Tailwind 3.4.1 + shadcn/ui + Parcel
✓ Pipeline: init-artifact.sh → dev → bundle-artifact.sh → bundle.html
✓ 40+ shadcn/ui components and all Radix UI dependencies preinstalled
✓ Use only for complex artifacts — simple HTML doesn’t justify the overhead
✓ Works with frontend-design (aesthetics), theme-factory (tokens), and design-designer (spec)

Next module

🎯

1.4 — design-designer

Specify complete design systems before building

Learn to use design-designer to create mood boards and define grids, typography, and palettes—the visual foundation that elevates all the other skills in Track 1.

← Back to Track 1 Next Module: 1.4 design-designer →