A specialized workflow for bundling modern React and Vite applications into portable, single-file HTML artifacts for seamless distribution.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install web-bundling
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install web-bundling using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Web Bundling (Single HTML)?
The Web Bundling skill provides a robust framework for converting complex web applications into self-contained HTML files. By integrating React 18, TypeScript, and Vite with bundling tools like Parcel and html-inline, developers can create high-performance artifacts that include all necessary logic, styles, and assets in one document. This approach is a core part of the Openclaw Skills ecosystem for creators who need to distribute applications without relying on complex hosting environments or external CDN dependencies.
This skill ensures that every part of your application—from Tailwind CSS styles to Base64-encoded images and fonts—is embedded directly into the HTML. This results in a truly portable file that works offline and is ideal for specialized environments such as mobile WebViews or indie game platforms. Utilizing Openclaw Skills for bundling helps maintain high performance while simplifying the deployment lifecycle.
Web Bundling (Single HTML) Use Cases
- Deploying games as Telegram Mini Apps with a single entry point.
- Packaging HTML5 games for distribution on itch.io or CrazyGames.
- Creating self-contained prototypes and demos for offline client presentations.
- Building portfolio artifacts that are easy to share and view without hosting setup.
- Developing offline-first web utilities that require zero external network requests.
How Web Bundling (Single HTML) Works
- Initialize the build process by running the Vite production script to compile React and TypeScript source code.
- Process the resulting distribution folder with Parcel to consolidate dependencies and remove source maps.
- Execute the html-inline utility to transform external CSS, JS, and media assets into internal tags and Base64 strings.
- Perform a final validation check to ensure mobile touch support and safe-area compatibility for WebView environments.
- Export the final bundle.html for deployment to target platforms like GitHub Pages or game portals.
Web Bundling (Single HTML) Setup
To get started with this bundling pattern using Openclaw Skills, follow these CLI steps:
# 1. Build the Vite project
npm run build
# 2. Bundle the dist folder using Parcel
npx parcel build dist/index.html --no-source-maps
# 3. Inline all external assets into a single file
npx html-inline dist/index.html -o bundle.html
Web Bundling (Single HTML) Data Schema & Taxonomy
The bundling process organizes data into a single-file taxonomy. All external references are replaced with internal data URIs as follows:
| Asset Type | Implementation | Purpose |
|---|---|---|
| Images | Base64 Data URI | Inlines PNG/JPG directly into the src attribute. |
| Fonts | @font-face CSS | Embeds WOFF2 files as Base64 within style tags. |
| Audio | Base64 Audio Tag | Embeds small sound effects for zero-latency playback. |
| Logic | Inline Script | Injects minified JavaScript into the bottom of the body. |
| Styles | Inline Style | Injects compiled Tailwind/CSS into the document head. |
Web Bundling (Single HTML) Advanced Features
- Support for React 18 and TypeScript build pipelines.
- Automated asset inlining for images, fonts, and audio files.
- Mobile-optimized configuration for Telegram Mini App WebView environments.
- Zero-dependency builds that function entirely offline.
- Compatibility with major web game portals like Poki and CrazyGames.
SKILL.md
Loading
Related Openclaw Skills
Video Pro
A high-performance video editing skill leveraging Remotion and FFmpeg for programmatic video production and processing on remote nodes.
Verify Before Done
A rigorous verification protocol that mandates fresh, objective evidence before an AI agent can claim task completion or perform a commit.
TDD Discipline
A rigorous Test-Driven Development framework for AI agents to ensure code reliability and eliminate regressions.
Subagent-Driven Development (subagent-dev)
A structured implementation pattern that uses fresh subagents for every task to ensure spec compliance and high code quality.
Web Design Pro
A professional-grade toolkit for implementing design systems, responsive layouts, and immersive game-specific UI/UX standards.
YouTube Pro (Miss Kim Edition)
An advanced analysis engine for extracting transcripts, metadata, and intelligent insights from YouTube content.
Featured*
