skills.rest
chhpt
chhptCOMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, vite, tailwindcss, parcel, html-inline, parcel-resolver-tspaths, shadcn/ui, radix-ui, pnpm, 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, but artifacts must be delivered as a single self-contained HTML file. This Skill scaffolds a complete React + TypeScript + Tailwind + shadcn/ui project and bundles it into one shareable HTML file. ## Core Features & Use Cases - Project Initialization: The init-artifact.sh script creates a Vite-based React 18 + TypeScript project with Tailwind CSS 3.4.1, path aliases, and 40+ pre-installed shadcn/ui components with all Radix UI dependencies. - Single-File Bundling: The bundle-artifact.sh script uses Parcel and html-inline to compile the entire app into one self-contained bundle.html with all JavaScript and CSS inlined. - Node Compatibility: Automatically detects the Node.js version and pins Vite 5.4.11 for Node 18 environments. - Use Case: Build an interactive dashboard artifact with tabs, charts, and dialogs using shadcn/ui components, then bundle it into a single HTML file to share directly in a Claude conversation. ## Quick Start Ask the assistant to create a complex React artifact with shadcn/ui components and bundle it into a single HTML file for sharing.

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 the bundle-artifact.sh script from your project root. It installs Parcel and html-inline, builds the app without source maps, and inlines all JavaScript and CSS into a single bundle.html file that works as a self-contained artifact.

How to create a React project with shadcn/ui components pre-installed?▼

Run init-artifact.sh with a project name to scaffold a Vite React TypeScript project. It configures Tailwind CSS 3.4.1, path aliases, and extracts 40+ shadcn/ui components with all Radix UI dependencies included.

Does this work with Node.js 18?▼

Yes, the initialization script detects your Node version automatically. For Node 18 it pins Vite to version 5.4.11 for compatibility, while Node 20 and above use the latest Vite release.

When should I not use this artifact builder?▼

Avoid it for simple single-file HTML or JSX artifacts that do not need state management, routing, or shadcn/ui components. The full React toolchain adds setup and bundling overhead unnecessary for basic artifacts.

Why does the bundle script fail with no index.html found?▼

The bundling script requires an index.html entry point in the project root and must be run from the directory containing package.json. Verify you initialized the project with init-artifact.sh and are in the correct directory.

Related Skills

Explore More Software Engineering Skills→
guanyangguanyang
960

web-artifacts-builder

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

Community
Intermediate
Sake-TeamSake-Team

browser-qa

Automate visual testing and UI interaction verification with browser automation tools.

Official
Advanced
ceslepceslep

ckm:ui-styling

Design user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
Jst-Well-DanJst-Well-Dan
8

artifacts-builder

Bundle React and TypeScript frontend code into a single self-contained HTML artifact.

Community
Advanced