React Artifacts

<!-- Adapted from: awesome-claude-skills/artifacts-builder -->

React Artifacts Builder

Create elaborate, multi-component claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui.

When to Use

• Building complex React artifacts for claude.ai
• Creating interactive demos needing state management
• Using shadcn/ui components in artifacts
• Bundling React apps into single HTML files
• NOT for simple single-file HTML/JSX artifacts

Stack

• React 18 + TypeScript + Vite
• Parcel (bundling)
• Tailwind CSS
• shadcn/ui (40+ pre-installed components)

Workflow

1. Initialize - Create project with init script 2. Develop - Build your artifact 3. Bundle - Convert to single HTML file 4. Share - Display artifact to user

Project Initialization

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

Creates project with:

• React + TypeScript via Vite
• Tailwind CSS with shadcn theming
• Path aliases (@/) configured
• 40+ shadcn/ui components pre-installed
• All Radix UI dependencies
• Parcel configured for bundling

Bundling to Single HTML

# Bundle entire React app to one HTML file
bash scripts/bundle-artifact.sh

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

Design Guidelines

Avoid "AI slop":

• No excessive centered layouts
• No purple gradients
• No uniform rounded corners
• Vary from Inter font

Best Practices:

• Match content to subject
• Clear visual hierarchy
• Consistent patterns
• Accessible design

shadcn/ui Components

Reference: <https://ui.shadcn.com/docs/components>

Pre-installed components include:

• Button, Card, Dialog, Drawer
• Form, Input, Select, Checkbox
• Table, Tabs, Toast
• And many more...

Example Structure

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Artifact</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  )
}

Tips

• Develop normally, bundle at the end
• Test in browser before bundling
• Keep bundle size reasonable
• Use Tailwind for responsive design