skills.rest
Clay-HHK
Clay-HHKCOMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

Builds and bundles React, Tailwind, and shadcn/ui projects into single HTML artifacts.

1|Updated Mar 5, 2026
Search Tags:#frontend#react#shadcn/ui#tailwind css#vite#html artifact#bundling
One-click install
npx skills add https://github.com/Clay-HHK/claude-skills --skill web-artifacts-builder-clay-hhk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/Clay-HHK/claude-skills/tree/main/web-artifacts-builder
Command: npx skills add https://github.com/Clay-HHK/claude-skills --skill web-artifacts-builder-clay-hhk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, vite, tailwindcss, parcel, html-inline, parcel-resolver-tspaths, shadcn/ui, radix-ui, and includes scripts (resource) components.

What problem does it solve? Creating complex claude.ai HTML artifacts with state management, routing, or component libraries requires a full frontend toolchain, and manually scaffolding and bundling a React project into a single shareable HTML file is tedious and error-prone. ## Core Features & Use Cases - Project Scaffolding: Initializes a React 18 + TypeScript + Vite project with Tailwind CSS, path aliases, and 40+ pre-installed shadcn/ui components via scripts/init-artifact.sh. - Single-File Bundling: Uses Parcel and html-inline via scripts/bundle-artifact.sh to inline all JavaScript and CSS into one self-contained bundle.html artifact. - Environment Handling: Auto-detects Node.js version (requires 18+), pins Vite for Node 18 compatibility, and installs pnpm if missing. - Use Case: Build an interactive dashboard artifact with shadcn/ui tables, dialogs, and charts, then bundle it into one HTML file to share directly in a Claude conversation. ## Quick Start Ask the AI to create a complex React artifact with shadcn/ui components and bundle it into a single HTML file using the web-artifacts-builder skill.

Frequently Asked Questions about web-artifacts-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I bundle a React app into a single HTML file?▼

Run scripts/bundle-artifact.sh from the project root. It installs Parcel, parcel-resolver-tspaths, and html-inline, builds the app without source maps, and inlines all JavaScript and CSS into a single bundle.html file.

How do I create a React project with shadcn/ui components?▼

Run scripts/init-artifact.sh with a project name. It scaffolds a Vite React-TypeScript project, configures Tailwind CSS 3.4.1 with the shadcn/ui theme, adds @/ path aliases, and extracts 40+ pre-built shadcn/ui components into src/.

When should I use web-artifacts-builder instead of a simple HTML artifact?▼

Use it for complex artifacts requiring state management, routing, or shadcn/ui components. For simple single-file HTML or JSX artifacts without these needs, a full React toolchain is unnecessary overhead.

Does the init script work with Node.js 18?▼

Yes, the script detects the Node version and pins Vite to 5.4.11 for Node 18 compatibility, while using the latest Vite on Node 20+. Versions below Node 18 are rejected with an error.

Why does bundle-artifact.sh fail with a package.json error?▼

The script must run from the project root containing package.json and index.html. If either file is missing, it exits with an error; navigate into the initialized project directory before bundling.

Related Skills

Explore More Software Engineering Skills→
Blake-JohnBlake-John

web-artifacts-builder

Scaffold React and Vite projects with Tailwind and shadcn/ui into bundled HTML artifacts.

Community
Advanced
SynthropicTechnologySynthropicTechnology

artifacts-builder

Bundle React, Tailwind, and shadcn projects into a single HTML artifact.

Official
Advanced
aifredoaiaifredoai

frontend-design

Generate production-grade frontend interfaces with unique aesthetics and user experience.

Official
Advanced
olli107xolli107x

web-artifacts-builder

Bundle React, TypeScript, and shadcn/ui projects into a single HTML file.

Community
Advanced