name: web-artifacts-builder description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. license: Complete terms in LICENSE.txt

Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

Initialize the frontend repo using
```
scripts/init-artifact.sh
```
Develop your artifact by editing the generated code
Bundle all code into a single HTML file using
```
scripts/bundle-artifact.sh
```
Display artifact to user
(Optional) Test the artifact

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and

Examples

Example usage 1
Example usage 2

Web Artifacts Builder

AI Skill Market Insights

Quick Start

Manual Installation

TEAR & SHARE

Frontend Design

Be Part of the 2,100+ Developer Community

Web Artifacts Builder

Design & Style Guidelines

Examples

License

Algorithmic Art

Anthropic Brand Styling

Internal Comms

Doc Co-Authoring Workflow

Channels

Learn

Compare

Company