Scaffold and bundle rich single-file web artifacts with React, Tailwind, and shadcn/ui

---
name: scaffold-and-bundle-rich-single-file-web-artifacts-66a998a218ab
slug: "scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui"
description: "Use Anthropic's web-artifacts-builder skill to scaffold a React artifact project, build a richer interface with state or routing, and bundle everything into one shareable HTML file. It is for artifact-delivery workflows, not for listing React or Tailwind as standalone products."
verification: "security_reviewed"
source: "https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder"
author: "Anthropic"
publisher_type: "Public repository"
category: "Templates & Workflows"
framework: "Claude Agents"
---

# Scaffold and bundle rich single-file web artifacts with React, Tailwind, and shadcn/ui

Use Anthropic's web-artifacts-builder skill to scaffold a React artifact project, build a richer interface with state or routing, and bundle everything into one shareable HTML file. It is for artifact-delivery workflows, not for listing React or Tailwind as standalone products.

## Prerequisites

Node.js 18+, React, TypeScript, Vite, Parcel, Tailwind CSS, and shadcn/ui

## Installation

Requirements and caveats from upstream:
- The frontmatter requires only two fields:

Basic usage or getting-started notes:
- Select document-skills or example-skills
- /plugin install example-skills@anthropic-agent-skills
- These example skills are all already available to paid plans in Claude.ai.

- Source: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
- Extracted from upstream docs: https://raw.githubusercontent.com/anthropics/skills/HEAD/README.md

## Documentation

- https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md

## Source

- [Agent Skill Exchange](https://agentskillexchange.com/skills/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui/)