web-artifacts-builder

Bundle a multi-file React+TypeScript frontend into a single self-contained HTML artifact.

1.2k|53|Updated Dec 24, 2025

Search Tags:#react #tailwind #parcel #artifact #shadcn #bundle

Ready to run

npx skills add https://github.com/polyuiislab/infiAgent --skill web-artifacts-builder-polyuiislab

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm, parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, vite, tailwindcss, postcss, autoprefixer, tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, lucide-react, next-themes, @radix-ui/react-accordion, sonner, cmdk, vaul, embla-carousel-react, react-day-picker, react-resizable-panels, date-fns, react-hook-form, @hookform/resolvers, zod, and includes scripts (resource) components.

What problem does it solve?

This Skill eliminates the friction of turning multi-file React + TypeScript frontends into a single self-contained HTML artifact that can be shared directly in claude.ai conversations, removing the need for hosting or multiple file attachments.

Core Features & Use Cases

Project scaffolding: Initializes a fully configured React + Vite + TypeScript project with Tailwind CSS and shadcn/ui components.
Deterministic bundling: Uses Parcel and html-inline to build and inline all JavaScript, CSS, and assets into one bundle.html file for easy sharing and preview.
Use Case: Build a stateful, routed frontend demo with shadcn/ui components, bundle it to a single file, and deliver it as an interactive artifact inside a chat or demo session.

Quick Start

Initialize the project with scripts/init-artifact.sh, develop your React + Tailwind + shadcn/ui app, and run scripts/bundle-artifact.sh to produce a single bundle.html ready to share.

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 multi-file React app into a single HTML file?▼

To bundle a multi-file React app into a single HTML file, this Skill uses Parcel and html-inline to compile and inline all JavaScript, CSS, and assets into one self-contained bundle.html file.

Can I bundle React apps using Tailwind CSS and shadcn/ui components?▼

Yes, you can bundle React apps using Tailwind CSS and shadcn/ui components. The Skill scaffolds a fully configured project with these dependencies and inlines them into the final HTML artifact.

What is the best way to share a stateful React frontend demo without hosting?▼

The best way to share a stateful React frontend demo without hosting is producing a self-contained HTML artifact. This Skill bundles routed, component-rich React apps into a single file for direct sharing in chat sessions.

Do I need pnpm installed to bundle React frontends into HTML?▼

Yes, you need pnpm installed to bundle React frontends into HTML. The Skill performs Node and pnpm environment checks before running its scaffolding and Parcel-based bundling scripts to generate the output.

Does this bundling process support Vite and TypeScript projects?▼

Yes, the bundling process supports Vite and TypeScript projects. It initializes a React plus Vite plus TypeScript environment and uses Parcel to compile the multi-file source into a single HTML file.