skills.rest
pchemguy
pchemguyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-artifacts-builder

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

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

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? Building complex claude.ai HTML artifacts with state management, routing, or component libraries requires a full frontend toolchain, and manually scaffolding React projects and inlining them into a single shareable HTML file is slow 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 compile the app into one self-contained bundle.html artifact. - Environment Handling: Auto-detects Node.js version (18+) and pins a compatible Vite version, and configures Parcel path-alias resolution. - Use Case: Build an interactive dashboard artifact with shadcn/ui cards, charts, and dialogs, then bundle it into one HTML file to share directly in a Claude conversation. ## Quick Start Ask the assistant to build 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 create a React artifact with shadcn/ui components?▼

Run scripts/init-artifact.sh with a project name to scaffold a Vite React TypeScript project preconfigured with Tailwind CSS and 40+ shadcn/ui components. Edit the generated code, then run scripts/bundle-artifact.sh to produce a single bundle.html artifact.

How to 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 bundle.html file.

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

Use this workflow only for complex artifacts requiring state management, routing, or shadcn/ui components. For simple single-file HTML or JSX artifacts, the full React scaffolding and bundling pipeline adds unnecessary overhead.

Does the init script work with Node 18?▼

Yes, the script detects the Node.js version and requires 18 or higher. On Node 18 it pins Vite to version 5.4.11 for compatibility, while Node 20 and above use the latest Vite release.

Why does bundle-artifact.sh fail with an index.html error?▼

The bundling script requires an index.html entry point in the project root and must be run from a directory containing package.json. Run it inside the project created by init-artifact.sh, not from the skill directory.

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
Sake-TeamSake-Team

browser-qa

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

Official
Advanced
J03Fr0stJ03Fr0st

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, JS, React, or Vue.

Community
Advanced
Jst-Well-DanJst-Well-Dan
8

artifacts-builder

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

Community
Advanced