skills.rest
CYRUS-pinto
CYRUS-pintoCOMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, vite, tailwindcss, parcel, html-inline, parcel-resolver-tspaths, tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, lucide-react, next-themes, sonner, cmdk, vaul, embla-carousel-react, react-day-picker, react-resizable-panels, date-fns, react-hook-form, zod, and includes scripts (resource) components.

What problem does it solve? Building complex, multi-component claude.ai HTML artifacts by hand is error-prone and limited when you need state management, routing, or a full component library. This Skill scaffolds a complete modern frontend project and bundles it into one self-contained HTML file ready to share as an artifact. ## Core Features & Use Cases - Project Initialization: Generates a React 18 + TypeScript + Vite project preconfigured with Tailwind CSS 3.4.1, path aliases, and 40+ shadcn/ui components with all Radix UI dependencies. - Single-File Bundling: Uses Parcel and html-inline to compile the entire app (JS, CSS, dependencies) into one portable bundle.html artifact. - Node Compatibility Handling: Auto-detects Node.js version and pins Vite 5.4.11 for Node 18 environments. - Use Case: Build an interactive dashboard artifact with tabs, dialogs, and charts 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 initialize a new web artifact project named my-dashboard, develop the React components, and bundle it into a single HTML artifact.

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 the init-artifact.sh script with a project name to scaffold a Vite React TypeScript project with Tailwind CSS and 40+ shadcn/ui components pre-installed. Edit the generated code, then run bundle-artifact.sh to produce a single HTML file.

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

Run bundle-artifact.sh from the project root. It installs Parcel 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 single-file HTML artifact?▼

Use this workflow for complex artifacts requiring state management, routing, or shadcn/ui components. Simple single-file HTML or JSX artifacts do not need the full React, Vite, and Parcel build pipeline.

Does the init script work with Node 18?▼

Yes, the script auto-detects the Node.js version and pins Vite to 5.4.11 for Node 18 compatibility, while Node 20 and above use the latest Vite. Versions below Node 18 are not supported.

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. Verify you are inside the project created by init-artifact.sh before bundling.

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
234194027-cpu234194027-cpu

web-artifacts-builder

Bundle a React, Tailwind, and shadcn/ui frontend into a single HTML artifact.

Community
Intermediate
parisgroup-aiparisgroup-ai
1

qa-mobile

Detect responsive layout and mobile UX regressions across browser viewports with Playwright MCP.

Official
Intermediate
SnoopiamSnoopiam

artifacts-builder

Bundle React and TypeScript projects into single HTML artifacts.

Community
Advanced