Artifacts Builder

Official Anthropic toolkit for creating sophisticated multi-component HTML artifacts that can be shared on Claude.ai, using modern frontend technologies with automated bundling.

Core Purpose

Artifacts Builder bridges React development with artifact deployment through:

• Modern stack: React 18 + TypeScript + Vite + Parcel + Tailwind CSS + shadcn/ui
• Pre-configured components: 40+ shadcn/ui components with Radix UI dependencies
• Automated bundling: Converts multi-file projects into self-contained HTML
• TypeScript support: Configured path aliases (@/) and type checking
• Single-command workflow: From development to shareable artifact

Development Stack

Five-Step Workflow

Pre-installed Components

Over 40 shadcn/ui components ready to use:

• Forms: Input, Select, Checkbox, Radio, Switch
• Layout: Card, Dialog, Sheet, Tabs, Accordion
• Data Display: Table, Badge, Avatar, Progress
• Feedback: Alert, Toast, Tooltip, Popover
• Navigation: DropdownMenu, NavigationMenu, Command

All Radix UI dependencies pre-configured.

Project Initialization

Automated Setup:

# Run initialization script
npm run init

# Creates:
# - Vite + React + TypeScript project
# - Tailwind CSS configuration
# - shadcn/ui components
# - Path aliases (@/)
# - TypeScript config

Requirements:

• Node 18+
• Automatic Vite version detection
• Compatible with modern npm/yarn/pnpm

Development Experience

import { Button } from '@/components/ui/button'
import { useCustomHook } from '@/hooks/use-custom'

Bundling Process

Single-Command Build:

npm run bundle

Output:

• Self-contained HTML file
• All JavaScript inlined
• All CSS embedded
• All dependencies bundled
• Ready for Claude.ai upload

Result: One HTML file with everything needed to run the application.

Design Guidance

Component Examples

Basic Button:

import { Button } from '@/components/ui/button'

export function MyComponent() {
  return (
    <Button variant="default" size="lg">
      Click Me
    </Button>
  )
}

Form with Validation:

import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'

export function LoginForm() {
  return (
    <form>
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" />
      <Button type="submit">Submit</Button>
    </form>
  )
}

Tailwind CSS Integration

Utility-First Styling:

<div className="flex items-center justify-between p-4 bg-white rounded-lg shadow-md">
  <h2 className="text-2xl font-bold text-gray-900">
    Title
  </h2>
  <Button className="ml-auto">Action</Button>
</div>

Custom Theme:

• Configured in tailwind.config.js
• shadcn/ui CSS variables
• Dark mode support
• Custom color palettes

Artifact Sharing

Upload to Claude.ai:

1. Complete your React application
2. Run npm run bundle
3. Upload the generated HTML file
4. Share with Claude.ai users

Single File Benefits:

• No external dependencies
• Portable and self-contained
• Easy to share and distribute
• Works offline

Best Practices

Common Use Cases

Interactive Dashboards

Build data visualization artifacts:

• Charts and graphs
• Real-time data display
• Interactive filters
• Export functionality

Form Applications

Create complex forms:

• Multi-step wizards
• Validation and error handling
• Dynamic field generation
• File uploads

Component Libraries

Showcase component collections:

• Interactive documentation
• Live code examples
• Theme demonstrations
• Design system showcase

Technical Requirements

Troubleshooting

Common Issues:

• Build errors: Check Node version (18+)
• Missing components: Re-run init script
• Type errors: Verify tsconfig.json paths
• Bundle size: Consider code splitting strategies

About This Skill

Official Anthropic toolkit for creating sophisticated multi-component HTML artifacts using React, TypeScript, Tailwind CSS, and shadcn/ui with automated bundling.