web-artifacts-builder

To bundle a React frontend into a single HTML file, this Skill uses Parcel-based scripts to inline JavaScript, CSS, and assets, outputting a self-contained bundle.html ready for sharing without server setup.

The best way to share interactive React artifacts is to bundle them into a single HTML file. This Skill inlines all UI components and state management assets into one bundle.html for seamless demonstration.

To initialize a Claude artifact project, run scripts/init-artifact.sh with a project name. This scaffolds a React project with Tailwind, shadcn/ui, and path aliases configured for immediate development.

Yes, this artifact bundler works with Tailwind and shadcn-ui. The initialization script scaffolds a project pre-configured with this frontend stack, ensuring compatible asset inlining during the Parcel bundling process.

Yes, you can use path aliases when developing React artifacts. The bundling workflow utilizes parcel-resolver-tspaths to correctly resolve and bundle TypeScript path aliases into the final inlined HTML output.

If assets are not inlining correctly into the bundle, ensure your project root contains a valid index.html. The automated workflow runs scripts/bundle-artifact.sh using html-inline to embed all JavaScript and CSS directly.