artifacts-builder

To bundle a React project into a single HTML file, run the bundle-artifact.sh script. It uses Parcel to compile the React and TypeScript project and html-inline to produce a self-contained bundle.html for sharing.

Yes, you can use Tailwind CSS and shadcn/ui components when bundling React artifacts. The Skill supports these libraries alongside path aliases, ensuring your styled UI prototype is preserved in the final single HTML file.

You need Vite for local development and Parcel for bundling to build a single-file React artifact. Vite runs the dev workflow, while Parcel handles the compilation and inlining step to generate the portable HTML file.

The best way to share a multi-file React prototype in Claude is to inline all assets into one file. This Skill converts your project into a self-contained bundle.html, eliminating the need to manage multiple files during demos.

React artifact inlining is needed to embed all JavaScript and CSS assets directly into the HTML. This ensures the single bundle.html file remains portable and viewable without requiring a live server or external file dependencies.

A limitation when packaging a front-end prototype into one HTML file is that it requires a React and TypeScript project structure. Projects relying on backend services or runtime environment variables will not function as a fully self-contained static artifact.