artifacts-builder_skill

Overview

This skill is a suite of tools for creating elaborate, multi-component HTML artifacts for claude.ai using modern frontend technologies (React, TypeScript, Tailwind CSS, shadcn/ui). It scaffolds a full Vite-based React app, provides a bundling pipeline that inlines everything into a single HTML file, and includes a rich set of preinstalled UI components. Use it when you need state, routing, or complex shadcn/ui components that exceed single-file snippets.

How this skill works

The skill generates a ready-to-develop React + TypeScript project using an initialization script, then runs a bundler script that compiles and inlines the entire app into bundle.html. The bundling step installs Parcel and helpers, builds without source maps, and uses html-inline to produce a self-contained HTML artifact. The resulting file contains all JS, CSS, and assets so it can be shared directly in a conversation.

When to use it

• When the artifact requires state management, routing, or multiple pages.
• When you want to use shadcn/ui components or Radix-backed UI patterns.
• When a self-contained HTML artifact is required for sharing or archival.
• When you need a Vite + React + TypeScript starter with Tailwind configured.
• When single-file HTML/JSX snippets are insufficient for your UI complexity.

Best practices

• Start with scripts/init-artifact.sh to scaffold the project and avoid manual setup.
• Follow the design guideline: avoid centered-heavy layouts, purple gradients, and Inter-only typography to reduce "AI slop."
• Keep index.html well-structured; the bundler expects an index.html at project root.
• Develop iteratively locally, then run scripts/bundle-artifact.sh only when ready to share.
• Prefer testing after delivering the artifact to users unless debugging is required.

Example use cases

• A multi-step form with client-side validation, complex state, and conditional routing.
• A dashboard with multiple shadcn/ui components, modals, and keyboard interactions.
• A portable UI demo that must be archived and reopened later without build tooling.
• A rich interactive help widget that uses Tailwind theming and custom component composition.