Web Artifacts Builder
This toolkit enables construction of sophisticated web artifacts for Claude conversations by combining React, TypeScript, Vite, Parcel, Tailwind CSS, and shadcn/ui components into single-file HTML bundles.
Install
/plugin marketplace add anthropics/skillsThen run /plugin to install the skill set that includes it. In Claude.ai and the Claude app, Anthropic skills are built in: turn them on in Settings → Capabilities.
npx skills add anthropics/skills --skill web-artifacts-buildergit clone --depth 1 https://github.com/anthropics/skills.git /tmp/skills
mkdir -p ~/.claude/skills
cp -r /tmp/skills/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builderPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
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.
Trigger phrases
Claude loads this skill automatically when you say things like:
How it works
- Project Setup: Initialize React project with TypeScript, Tailwind, and 40+ shadcn/ui components
- Development: Build artifact by modifying source files
- Bundling: Transform into self-contained HTML using Parcel
- Distribution: Share as Claude artifact for user interaction
When to use it
- When building complex artifacts with state management
- When using shadcn/ui component library
- When creating multi-component web artifacts
Best practices
- Only use for complex artifacts (simple ones don't need this)
- Test after sharing rather than upfront to minimize latency
- Use pre-installed shadcn/ui components when possible
From the SKILL.md
# Web Artifacts Builder To build powerful frontend claude.ai artifacts, follow these steps: 1. Initialize the frontend repo using `scripts/init-artifact.sh` 2. Develop your artifact by editing the generated code 3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh` 4. Display artifact to user 5. (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 bash scripts/init-artifact.sh <project-name> cd <project-name> ``` This creates a fully configured project with: - ✅ React + TypeScript (via Vite) - ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system - ✅ Path aliases (`@/`) configured - ✅ 40+ shadcn/ui components pre-installed - ✅ All Radix UI dependencies included - ✅ Parcel configured for bundling (via .parcelrc) - ✅ Node 18+ compatibility (auto-detects and pins Vite version) ### Step 2: Develop Your Artifact To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance. ### Step 3: Bundle to Single HTML File To bundle the React app into a single HTML artifact: ```bash bash scripts/bundle-artifact.sh ```
Details
- Skill name
web-artifacts-builder- Repository
- anthropics/skills
- Path
skills/web-artifacts-builder/SKILL.md
FAQ
What does the Web Artifacts Builder skill do?
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.
How do I install the Web Artifacts Builder skill?
Claude Code plugin: /plugin marketplace add anthropics/skills. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Related skills
Algorithmic Art
anthropics/skills
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Brand Guidelines
anthropics/skills
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Canvas Design
anthropics/skills
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
D3 Viz
chrisvoncsefalvay/claude-d3js-skill
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
Theme Factory
anthropics/skills
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Naming
glacierphonk/naming
Name products, SaaS, brands, open source projects, bots, and apps. Use when the user needs to name something, find a brand name, or pick a product name. Metaphor-driven process that produces memorable, meaningful names and avoids AI slop.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.