web-artifacts-builder

Bundle React-based frontend artifacts into a single HTML file.

76|3|Updated Jan 20, 2026

Search Tags:#frontend #react #tailwind #bundling #artifact #shadcn-ui

Ready to run

npx skills add https://github.com/evolving-machines-lab/evolve --skill web-artifacts-builder-evolving-machines-lab

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/evolving-machines-lab/evolve/tree/main/skills/web-artifacts-builder
Command: npx skills add https://github.com/evolving-machines-lab/evolve --skill web-artifacts-builder-evolving-machines-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Suite of tools for creating elaborate, multi-component HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Core Features & Use Cases

Initialize a full frontend artifact project with React + TypeScript (Vite) and Tailwind + shadcn/ui
Bundle artifacts into a single self-contained HTML file using Parcel + html-inline
Enable path aliases, component-driven development, and reproducible bundling for shareable demos

Quick Start

Run the init-artifact.sh script with your project name to scaffold a new artifact project, then bundle it into a single HTML using the bundle-artifact.sh script.

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 with Tailwind CSS into a single HTML file?▼

To bundle a React app with Tailwind CSS into a single HTML file, use the bundle-artifact.sh script which leverages Parcel and html-inline to inline assets. It scaffolds projects with React, TypeScript, and shadcn/ui, compiling everything into one self-contained file.

What's the best way to share a multi-component React artifact that uses state management and routing?▼

The best way to share a multi-component React artifact with state management and routing is bundling it into a single HTML file. This Skill initializes a full project with Vite and shadcn/ui, enabling component-driven development before compiling it into a portable output.

Do I need Node.js and pnpm to build frontend artifacts into a single HTML?▼

Yes, you need Node.js 18+ and pnpm to build frontend artifacts into a single HTML. The workflow relies on these environments to run the init-artifact.sh and bundle-artifact.sh scripts, which manage dependencies and execute the Parcel bundling process.

Can I use shadcn-ui components when creating a single-file HTML artifact?▼

Yes, you can use shadcn-ui components when creating a single-file HTML artifact. The initialization script scaffolds a project specifically configured with Tailwind CSS and shadcn/ui, allowing you to build elaborate user interfaces before bundling everything together.

When should I avoid using a single HTML file bundler for web artifacts?▼

You should avoid using a single HTML file bundler for simple single-file HTML or JSX artifacts. This approach is designed for elaborate, multi-component architectures requiring state management, routing, or shadcn/ui, adding unnecessary overhead for basic frontend tasks.

How does Parcel handle path aliases when bundling React artifacts?▼

Parcel handles path aliases when bundling React artifacts by using the parcel-resolver-tspaths plugin. This allows the build process to correctly resolve TypeScript paths during the bundling step, ensuring multi-component architectures compile successfully into a single file.