Alanamultiskillagent
Back to skills

web-artifacts-builder

development

Builds multi-component HTML artifacts for claude.ai using React 18, TypeScript, Tailwind CSS, and shadcn/ui. Handles the full pipeline: project initialization, component development, and bundling ever

anthropicsanthropics
|View all anthropics skills →

Setup & Installation

npx skills add https://github.com/anthropics/web-artifacts-builder --skill web-artifacts-builder
or paste the link and ask your coding assistant to install it
https://github.com/anthropics/web-artifacts-builder
View on GitHub

What This Skill Does

Builds multi-component HTML artifacts for claude.ai using React 18, TypeScript, Tailwind CSS, and shadcn/ui. Handles the full pipeline: project initialization, component development, and bundling everything into a single self-contained HTML file. Designed for artifacts that need state management, routing, or a component library, not simple one-off HTML files. Setting up React, Tailwind, shadcn/ui, and a single-file bundler from scratch takes 30+ minutes of config; this skill scripts the entire setup and bundle step into two commands.

When to use it

  • Working with web artifacts builder functionality
  • Implementing web artifacts builder features
  • Debugging web artifacts builder related issues

Similar Skills

android-native-dev

A reference guide for Android native development covering Kotlin/Compose patterns, Material Design 3 specs, Gradle project setup, and build troubleshooting. It defines standards for threading, state m

apollo-client

A guide for building React applications with Apollo Client 4.x. Covers setting up the client, writing GraphQL queries and mutations with hooks, configuring cache policies, managing local state with re

apollo-connectors

Helps integrate REST APIs into GraphQL supergraphs using Apollo Connectors with @source and @connect directives. It walks through schema creation, composition validation, and connector execution using

apollo-federation

Helps you write Apollo Federation 2.x subgraph schemas for composing multiple GraphQL APIs into a single supergraph. Covers entity definitions with @key, field sharing with @shareable, computed fields