Skill Editor：纯浏览器端的 AI Agent 技能包编辑器

做 AI Agent 开发的人应该都遇到过 .skill 文件的编辑需求。这类文件本质上是 ZIP 包，里面放着 SKILL.md、脚本、参考文档等内容，用来给 AI Agent 定义技能。目前大多数人的做法是解压出来改，改完再打包回去，流程繁琐且容易出错。

Skill Editor 解决的就是这个问题：一个纯浏览器端的编辑器，直接打开 .skill 文件，编辑、预览、导出，全程不用装任何软件。

功能一览

整个编辑器跑在浏览器里，不依赖后端服务。核心能力包括：

• 加载、编辑、导出 .skill 文件，全部在浏览器内完成
• 支持 Markdown、YAML、Python、JavaScript 的语法高亮，底层用的 CodeMirror 6
• 左侧有文件树，可以添加和删除文件
• 能预览图片和 PDF
• 导出前自动校验 SKILL.md 和 YAML frontmatter 的格式
• 支持亮色和暗色两种主题

用法也很简单，打开在线地址就能用，文件从本地拖进去即可。编辑完成后点导出，会生成一个符合格式要求的 .skill ZIP 包。

.skill 文件的结构

对于不熟悉这个格式的人，简单说明一下 .skill 文件的目录结构：

SKILL.md          # 必须有，YAML frontmatter + Markdown 正文
scripts/          # 可选，放脚本文件
references/       # 可选，放参考文档
assets/           # 可选，放资源文件

其中 SKILL.md 的 frontmatter 里必须包含 name 和 description 两个字段。Skill Editor 在导出时会对这些做校验，格式不对会提示你修改。

技术实现

项目的技术栈比较新：React 19 + Vite 7 + Tailwind CSS v4，文件操作用 JSZip 处理 ZIP 的解压和压缩，语法高亮用 CodeMirror 6。

整个项目可以通过 GitHub Actions 自动部署到 GitHub Pages，推送到 main 分支就会触发构建和发布。本地开发的话，npm install 装完依赖，npm run dev 就能跑起来，地址是 http://localhost:5173/skill-editor/。

目前项目 Star 数不多，但对于经常和 .skill 文件打交道的人来说，这个工具省掉了手动解压打包的步骤，算是一个实用的小工具。

ill` 文件打交道的人来说，这个工具省掉了手动解压打包的步骤，算是一个实用的小工具。