Artifacts Builder

Overview

This skill provides a complete pipeline for creating rich, interactive claude.ai HTML artifacts using a modern frontend stack. It handles project initialization, component development, and single-file bundling so that a fully self-contained artifact can be shared directly in a Claude conversation. Use this for complex artifacts that require state management, routing, or shadcn/ui components.

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

Quick Start

Step 1 -- Initialize the Project

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

The generated project includes:

Step 2 -- Develop the Artifact

Edit the generated files to build the artifact. Refer to the shadcn/ui component docs for available components: https://ui.shadcn.com/docs/components

Step 3 -- Bundle to a Single HTML File

bash scripts/bundle-artifact.sh

This produces bundle.html -- a self-contained file with all JavaScript, CSS, and dependencies inlined. The project must have an index.html in the root directory.

What the bundling script does:

1. Installs bundling dependencies (Parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
2. Creates .parcelrc config with path alias support
3. Builds with Parcel (no source maps)
4. Inlines all assets into a single HTML file via html-inline

Step 4 -- Share the Artifact

Share bundle.html in the conversation so the user can view it as a Claude artifact.

Step 5 -- Test (Optional)

To test or visualize the artifact, use available tools (Playwright, Puppeteer, or other skills). Avoid testing upfront as it adds latency; test after presenting the artifact if issues arise.

Design Guidelines

To avoid common "AI slop" patterns, do not use:

• Excessive centered layouts
• Purple gradients
• Uniform rounded corners everywhere
• Inter font as the default

Bundled Scripts