web-artifacts-builder

Bundling a React project with Tailwind CSS and shadcn/ui into a single HTML file combines your components, styles, and assets into one self-contained artifact. This Skill automates that process using Vite or Parcel to output a bundle.html file suitable for deployment and sharing in Claude contexts.

This Skill supports both Vite and Parcel as bundling options for your frontend project. Choose based on your project structure and performance needs; both integrate with Tailwind CSS and inline assets into your final bundle.html output.

Before bundling, ensure Node.js 18+ is installed, your project has an index.html entry point, TypeScript and React dependencies are defined, and shadcn/ui components are integrated into your source. The Skill handles the rest of the bundling pipeline.

Project initialization with this Skill sets up a React and TypeScript structure with predefined configurations, automatically integrating shadcn/ui components and Tailwind CSS so you skip boilerplate and start building immediately.

Inlining assets embeds images, fonts, and stylesheets directly into bundle.html, creating a single file with no external dependencies. This ensures your artifact works reliably when shared in Claude conversations without broken links.

This Skill optimizes bundles for both: it minimizes file size and load times through Vite or Parcel compression while keeping deployment simple by outputting one self-contained HTML file instead of managing multiple assets and build artifacts.