前言¶

做网页小游戏、互动课件或者 H5 作品的人，通常会遇到同一个分发问题：项目里除了 HTML，还有 JS、CSS、图片、音频，素材往往按目录分开存放。发给同事或学生时，要么打包 zip 让人解压再开本地服务器，要么因为路径写死导致图片不显示。zip 还会被杀软拦、被微信文件传输助手压缩、被邮箱附件大小卡住。

下面介绍的 Skill 就是为了解决这件事：把整个项目目录连同子文件夹，打包成单个 HTML 文件，同时对图片和音频做大幅压缩，让成品落在一个体积预算里，默认 10MB。这样分发就变成了「发一个文件，双击就能打开」。

这是什么¶

一句话定位：一个把多文件网页项目打包成可离线运行的单文件 HTML，并附带素材压缩能力的 Skill。

出品方是 SkillHub 上的社区 Skill，坐标 @indiv-dfteacher/fmg-htmldb，发布者 ID 为 user_73cb5b59，当前版本 1.0.2，来源标记为 community，分类属于 dev-programming。同名公众号「数智化教学大冯老师」同步提供资源和技能更新。

它解决的问题是：网页类作品的成品体积过大、依赖外部目录和服务器，导致离线分发困难。

核心功能¶

根据官方页面的简介，这个 Skill 只做一件事，但包含三个明确的能力点：

1、多文件合并。把多个文件以及子文件夹合并进一个 HTML 文件，不要求使用者自行整理目录结构。
2、素材压缩。对图片和音频做大幅度压缩，这是成品体积能控制下来的主要手段。
3、体积预算控制。把最终成品的体积控制在指定预算内，默认阈值是 10MB，具体数值可以按需指定。

注意它只针对图片和音频做压缩，不会对 HTML、JS、CSS 做代码级优化；想进一步缩小体积，得自己先优化代码再打包。

安装与启用¶

这个 Skill 遵循通用的 SKILL.md 格式。目前抓取到的官方资料里没有给出独立的安装命令行，只提供了坐标和页面地址，所以这里不编造安装参数。

在 Cursor、Codex CLI、Claude Code 这类支持 Skill 的客户端里，通用做法是把坐标 @indiv-dfteacher/fmg-htmldb 交给对应工具的技能市场或 SkillHub 面板去拉取。如果客户端只支持本地路径，则需要从官方页面 https://www.skillhub.cn/skills/indiv-dfteacher/fmg-htmldb 取到 SKILL.md 后按本地 Skill 目录放置。

一个对部署环境有参考价值的字段是 requires_api_key=false：这个 Skill 不需要 API Key，也就不会因为你没有配额而跑不起来，适合直接离线使用。

典型用法¶

官方简介给出的使用形态是「一个文件双击即玩」，实际操作顺序可以拆成三步：

1、准备好待打包的项目目录，把 HTML 和素材子文件夹放在一起。
2、把目录路径和体积预算告诉 Skill，让它读取文件、压缩图片与音频、合并生成单个 HTML。
3、拿到生成的 HTML 后单独分发，不附带任何外部依赖。

关于命令细节要说明一下：已抓取的官方资料里没有列出具体的命令行参数或配置字段，比如压缩质量、格式转换策略、超预算时的处理方式，都没有公开说明。因此上面只写了流程，没有写具体命令。需要确认这些参数时，应回到 SKILL.md 原文或官方页面查看，不要照抄第三方示例。

适用场景与注意¶

适合的场景比较明确：网页小游戏、互动课件、H5 作品的成品分发，尤其是需要离线打开、不方便起服务器、不方便让对方解压的场景。

几条使用上的限制：

1、它处理的是「分发」，不是「开发」。打包前的代码结构、资源引用方式仍然需要自己保证正确。
2、压缩是针对图片和音频的，图片如果本身已经是 WebP 或体积已经很小，压缩收益会打折扣。
3、体积预算是硬约束，默认 10MB。素材总量远超预算时，最终结果取决于 Skill 的超预算策略，而这部分官方资料没有说明，第一次用建议先拿小项目试，确认成品体积和画质是否符合预期。
4、安装量标记为 0，下载量为 929，属于较新的社区 Skill，遇到问题时可参考的资料较少。

结尾¶

回到最初的问题：网页类作品想「一个文件发出去就能玩」，最省事的做法就是打包加压缩两步一次做完。这个 Skill 把这两步合并成一条流程，默认把成品压在 10MB 以内，免去了反复调整素材和手动压缩的重复劳动。

官方地址：https://api.skillhub.cn/indiv-dfteacher/fmg-htmldb，页面地址：https://www.skillhub.cn/skills/indiv-dfteacher/fmg-htmldb。