Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies.

Overview

Build powerful frontend artifacts using React 18, TypeScript, Vite, Tailwind CSS, and shadcn/ui. Perfect for complex artifacts requiring state management, routing, or sophisticated UI components.

When to Use

Creating complex React-based artifacts
Building interactive dashboards and tools
Developing multi-page artifacts with routing
Creating artifacts with shadcn/ui components

Key Features

React 18 + TypeScript project scaffolding
Vite + Parcel bundling to single HTML file
Tailwind CSS integration
shadcn/ui component library support
Automatic artifact bundling

Installation

This skill is included in the Claude Code download package. After downloading, place the skill folder in your ~/.claude/skills/ directory.