# Web Artifacts Builder

> Web Artifacts Builder

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

---

# Web Artifacts Builder

Suite of tools for creating elaborate, multi-component HTML artifacts using modern frontend technologies (React, Tailwind CSS, shadcn/ui).

## Prerequisites

- Node.js 18+
- npm
- Understanding of React and TypeScript

## Instructions

### Stack

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

### Step 1: Initialize Project

```bash
bash scripts/init-artifact.sh <project-name>
cd <project-name>
```

Creates:
- React + TypeScript (via Vite)
- Tailwind CSS 3.4.1 with shadcn/ui theming
- Path aliases (`@/`) configured
- 40+ shadcn/ui components pre-installed
- Parcel configured for bundling

### Step 2: Develop Your Artifact

Edit the generated files to build your artifact.

### Step 3: Bundle to Single HTML

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

Creates `bundle.html` - self-contained with all JS, CSS, dependencies inlined.

### Step 4: Share Artifact

Share the bundled HTML file as an artifact.

### Step 5: Testing (Optional)

Use Playwright/Puppeteer to test if needed.

### Design Guidelines

**AVOID "AI slop":**
- Excessive centered layouts
- Purple gradients
- Uniform rounded corners
- Inter font

**DO:**
- Unique, intentional design choices
- Appropriate use of shadcn/ui components
- Proper spacing and hierarchy

## Error Handling

- Ensure index.html exists in root for bundling
- If build fails, check for TypeScript errors
- Test bundle.html locally before sharing

## Notes

- For complex artifacts requiring state management or routing
- Not for simple single-file HTML/JSX artifacts
- shadcn/ui components: https://ui.shadcn.com/docs/components

Source: anthropics/skills