菜单
Bundle web applications into single HTML files for distribution. Use when creating self-contained HTML games, artifacts, or demos that need to be shared as a single file. Covers React+Vite+Parcel bundling pattern.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/johnalbertini14-glitch/openclaw-skills --skill web-bundling命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | web-bundling |
| description | Bundle web applications into single HTML files for distribution. Use when creating self-contained HTML games, artifacts, or demos that need to be shared as a single file. Covers React+Vite+Parcel bundling pattern. |
| metadata | {"author":"misskim","version":"1.0","origin":"Concept from Anthropic web-artifacts-builder, adapted for game distribution"} |
React/Vite 앱을 단일 HTML 파일로 번들링.
이미 단일 HTML로 작성된 경우 번들링 불필요.
CSS/JS를 <style>/<script> 태그 안에 인라인.
이미지는 base64 data URI로 임베드.
스택: React 18 + TypeScript + Vite + Parcel (번들링) + Tailwind CSS
# 1. Vite로 프로젝트 빌드
npm run build
# 2. Parcel로 단일 파일 번들
npx parcel build dist/index.html --no-source-maps
# 3. html-inline으로 에셋 인라인
npx html-inline dist/index.html -o bundle.html
<!-- 이미지 → base64 -->
<img src="data:image/png;base64,iVBOR..." />
<!-- 폰트 → base64 @font-face -->
<style>
@font-face {
font-family: 'GameFont';
src: url(data:font/woff2;base64,...) format('woff2');
}
</style>
<!-- 오디오 → base64 (작은 효과음만) -->
<audio src="data:audio/mp3;base64,..."></audio>