skills.rest
involvex
involvexCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-artifacts-builder

Creates and bundles multi-component React artifacts into single HTML files.

Updated Mar 1, 2026
Search Tags:#React#shadcn/ui#tailwind css#HTML artifact#vite#parcel#bundling
One-click install
npx skills add https://github.com/involvex/dev --skill web-artifacts-builder-involvex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/involvex/dev/tree/main/.claude/skills/web-artifacts-builder
Command: npx skills add https://github.com/involvex/dev --skill web-artifacts-builder-involvex

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, tailwindcss, vite, and includes scripts (resource) components.

What problem does it solve? Building elaborate claude.ai HTML artifacts with state management, routing, or shadcn/ui components requires a full frontend project setup and a way to bundle everything into one self-contained HTML file, which is tedious to configure manually. ## Core Features & Use Cases - Project Initialization: The init-artifact.sh script scaffolds a React 18 + TypeScript + Vite project with Tailwind CSS, path aliases, and 40+ pre-installed shadcn/ui components. - Single-File Bundling: The bundle-artifact.sh script uses Parcel and html-inline to compile the entire app into one bundle.html artifact with all JavaScript and CSS inlined. - Node Compatibility Handling: Automatically detects the Node.js version and pins Vite to 5.4.11 for Node 18 environments. - Use Case: When a user asks for an interactive dashboard artifact with tabs, dialogs, and forms, initialize the project, build the UI with shadcn/ui components, then bundle it into a single HTML file to share in the 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 scripts.

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 one 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. It scaffolds a Vite React-TypeScript project, configures Tailwind CSS 3.4.1 with the shadcn theming system, adds @/ path aliases, and extracts 40+ shadcn/ui components from a bundled tarball.

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

Use it for complex artifacts requiring state management, routing, or shadcn/ui components. Simple single-file HTML or JSX artifacts do not need this multi-step build and bundling workflow.

Does the init script work with Node 18?▼

Yes, the script detects your Node.js version and requires Node 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 the directory containing package.json. Verify you are inside the project created by init-artifact.sh 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
akornmeierakornmeier
4

cloudflare-browser-rendering

Control headless browsers via Cloudflare's Browser Rendering API for automation.

Community
Advanced
d-oitd-oit

frontend-design-system

Refactor React/Tailwind frontend UI to conform to project design system tokens.

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