home / skills / leegonzales / aiskills / artifacts-builder

artifacts-builder skill

This skill helps you create multi-component claude.ai HTML artifacts using React, Tailwind, and shadcn/ui, bundling into a single shareable HTML file.

This is most likely a fork of the artifacts-builder skill from openclaw

npx playbooks add skill leegonzales/aiskills --skill artifacts-builder

Review the files below or copy the command above to add this skill to your agents.

Files (8)

SKILL.md

3.0 KB

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

# 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

Overview

This skill is a toolkit for building rich, multi-component HTML artifacts for claude.ai using a modern React + TypeScript stack. It scaffolds a full frontend project with Tailwind CSS and shadcn/ui, then produces a single self-contained HTML file you can share directly in conversations. Use it when you need state, routing, or advanced UI components that go beyond single-file snippets.

How this skill works

The skill generates a Vite-powered React project preconfigured with Tailwind and shadcn/ui, sample components, and parcel bundling support. Development happens in the generated project; when ready, a bundling script inlines JavaScript, CSS, and assets into a single bundle.html that can be shared as an artifact. Optional testing and visual checks are supported but not required before sharing.

When to use it

Building multi-view interfaces with client-side routing and state management.
Creating artifacts that rely on shadcn/ui or many Radix UI components.
When you need a single-file HTML artifact (all JS/CSS inlined) for easy sharing.
Producing interactive demos, dashboards, or complex form flows for users.
When a simple single-file JSX/HTML snippet is insufficient.

Best practices

Start with the init script to create a fully configured project scaffold.
Avoid AI-style visual clichés: steer clear of excessive centered layouts, purple gradients, uniform rounded corners, and the Inter font.
Keep components modular and leverage shadcn/ui primitives to ensure accessibility.
Ensure index.html exists at project root before bundling; the bundler requires it.
Bundle only when the UI is functionally complete to minimize iteration latency.

Example use cases

A multi-step interactive onboarding widget using routing and local state.
A responsive data visualization dashboard combining charts and shadcn/ui controls.
A reusable component library preview packaged as a single artifact for reviewers.
An interactive form with validation, conditional fields, and submission flow.
A feature demo that needs complex keyboard/accessibility behavior from Radix-based components.

FAQ

What does the init script create?

It scaffolds a Vite + React + TypeScript project with Tailwind, shadcn/ui, path aliases, Parcel bundler support, and example components.

How do I produce a single-file HTML artifact?

Run the provided bundle script; it builds the app with Parcel and then inlines all assets into bundle.html for direct sharing.

Do I need to test the artifact before sharing?

Testing is optional. You can share the bundled HTML quickly and test later if needed to avoid slowing delivery.