skills.rest
mccleod1290
mccleod1290COMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

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

1|Updated Jul 2, 2026
Search Tags:#frontend#react#tailwind css#vite#html artifact#bundling#shadcn ui
One-click install
npx skills add https://github.com/mccleod1290/bb-agentic-setupv2 --skill web-artifacts-builder-mccleod1290
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/mccleod1290/bb-agentic-setupv2/tree/main/documenting-skills/web-artifacts-builder
Command: npx skills add https://github.com/mccleod1290/bb-agentic-setupv2 --skill web-artifacts-builder-mccleod1290

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating complex, multi-component claude.ai HTML artifacts with state management, routing, or shadcn/ui components requires a full frontend toolchain, and manually scaffolding and bundling that into a single shareable HTML file is slow and error-prone. ## Core Features & Use Cases - Project Scaffolding: Initializes a complete 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: Compiles the entire app into one self-contained bundle.html with all JavaScript and CSS inlined using Parcel and html-inline via scripts/bundle-artifact.sh. - Environment Handling: Auto-detects Node.js version (18+) and pins a compatible Vite version, and installs pnpm if missing. - Use Case: Build an interactive dashboard artifact with dialogs, tables, and forms using shadcn/ui components, then bundle it into one HTML file to share directly in a Claude conversation. ## Quick Start Ask the assistant to create a new React artifact project named my-dashboard and bundle it into a single HTML file.

Frequently Asked Questions about web-artifacts-builder

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

FAQPage Schema
How do I create a React artifact with shadcn/ui components?▼

Run scripts/init-artifact.sh with a project name to scaffold a Vite React TypeScript project with Tailwind CSS and 40+ shadcn/ui components pre-installed. Then edit the generated code and run scripts/bundle-artifact.sh to produce a single bundle.html file.

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 one self-contained bundle.html file.

When should I use this instead of a simple single-file HTML artifact?▼

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

What Node.js version is required for the artifact scripts?▼

Node.js 18 or higher is required, and the init script exits with an error on older versions. On Node 18 it pins Vite to 5.4.11 for compatibility, while Node 20 and above use the latest Vite.

Why does init-artifact.sh fail with a tarball not found error?▼

The script requires shadcn-components.tar.gz in the same directory as the script, since it extracts the pre-built shadcn/ui components from that archive into src/. Ensure the tarball exists alongside init-artifact.sh before running it.

Related Skills

Explore More Software Engineering Skills→
arthurharyssonarthurharysson

create-component

Create React components with standardized folder structure and documentation.

Community
Advanced
massgenmassgen
1.1k

textual-ui-developer

Run the MassGen Textual UI in a browser with textual-serve for visual feedback.

Official
Advanced
aquariuscookaquariuscook

visual-testing-advanced

Compare screenshots across viewports and browsers to detect visual regressions.

Community
Advanced
SnoopiamSnoopiam

artifacts-builder

Bundle React and TypeScript projects into single HTML artifacts.

Community
Advanced