web-artifacts-builder

Bundle frontend assets into a single self-contained HTML artifact.

Updated May 4, 2026

Search Tags:#html #frontend #react #bundling #artifact #bundle #inlining

Ready to run

npx skills add https://github.com/511avolo-dot/MR --skill web-artifacts-builder-511avolo-dot

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/511avolo-dot/MR/tree/main/.agents/skills/web-artifacts-builder
Command: npx skills add https://github.com/511avolo-dot/MR --skill web-artifacts-builder-511avolo-dot

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

The Web Artifacts Builder solves the challenge of turning multi-file frontend projects into a single, sharable HTML artifact that works inside Claude conversations by inlining assets and preserving functionality.

Core Features & Use Cases

Single-file bundling: inline all JS/CSS/assets into one bundle.html for easy sharing.
Auto-initialization & bundling: uses provided scripts to scaffold and bundle React-based artifacts.
Artifact-ready delivery: outputs bundle.html that can be pasted into Claude conversations without external dependencies.

Quick Start

Initialize a new artifact project with the provided script, then bundle into a single HTML artifact.

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 frontend into a single HTML file?▼

To bundle a React frontend into a single HTML file, this Skill uses Parcel and html-inline to compile and inline all JavaScript, CSS, and assets directly into one self-contained bundle.html, eliminating external dependencies for immediate sharing.

What is inlining assets and why is it needed for Claude artifacts?▼

Inlining assets embeds all JavaScript, CSS, and media directly into the HTML document. It is needed for Claude artifacts to ensure the React-based UI functions independently as a single file without relying on external network requests for assets.

How do I initialize a project and build a bundle.html artifact?▼

To initialize and build a bundle.html artifact, run the provided scripts/init-artifact.sh script. This scaffolds the project rooted in index.html, then bundles the React UI and inlines all assets into the final self-contained HTML file.

Can I use Parcel to inline all CSS and JS into one HTML document?▼

Yes, you can use Parcel alongside the parcel-resolver-tspaths and html-inline dependencies to bundle and inline all CSS and JS directly into one HTML document, creating a turnkey artifact ready for Claude conversations.

Does this single-file bundling approach work with TypeScript path aliases?▼

Yes, single-file bundling works with TypeScript path aliases. The process uses the parcel-resolver-tspaths plugin to correctly resolve module paths during the Parcel bundling step before all assets are inlined into the final HTML.