web-artifacts-builder
Create multi-component interactive React/Tailwind web apps.
Developer Setup
Setup & Installation
npx skills add https://github.com/anthropics/skills --skill web-artifacts-buildernpx skills add https://github.com/anthropics/skills --skill web-artifacts-builderOverview
What This Skill Does
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. This skill uses the official Agent Skills specifications to automatically trigger specialized workflows, optimize token usage via progressive disclosure, and ensure reliable execution outputs.
Application
When to use this Skill
- Running the agent with the web-artifacts-builder skill installed in your workspace
- Automating complex actions using web-artifacts-builder guidelines
- Solving issues matching: "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."
Documentation
Show Skills.md file
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 Inter font.
Quick Start
Step 1: Initialize Project
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
Recommendations