product-docs-toolkit

面向已有 Web 产品界面的能力工具箱，供 coding agent 使用。

它不是"一键生成文档"的流水线，而是一组可以按需组合的能力：浏览器会话、访问与登录、 菜单提取、页面探索、弹窗判断、截图脱敏、截图标注、文档写作。agent 根据当前目标 选取最小必要的一组来用。

安装

npx skills add Shadowzzh/product-docs-toolkit

装好后 Claude Code、Codex、Cursor、OpenCode 等 agent 会自动发现它。

前置条件

依赖	说明
Node.js 18+	脚本是 .mjs
Chrome	复用你已装的，不需要额外下载浏览器
playwright-core	首次使用前在 skill 目录跑一次 npm install（约 13MB）

浏览器怎么用

优先零安装，按以下顺序：

1. 复用已有的 Playwright Page —— 当前任务已经提供时直接用
2. 连接已有 CDP —— 你已经有跑着的 CDP 实例（比如 Chrome 调试端口）时最省事
3. 用你已装的 Chrome 起一个独立 CDP —— 脚本会带独立 Profile 启动，不碰你正在用的浏览器
4. 以上都不行 → 询问你 —— 给出「提供 CDP / 允许安装 Playwright Chromium / 使用 DevTools MCP」三个选项，不擅自安装

第 3 步可以直接用：

npm run chrome:start              # 启动，输出 CDP 地址与 PID
npm run chrome:start -- --headless  # 无图形界面时
npm run chrome:stop -- --pid <pid>  # 关闭指定的那个实例

启动脚本会：

• 用独立 --user-data-dir（否则端口根本不会开）
• 自动选空闲端口
• 轮询等 CDP 就绪

任务结束时不会自动关闭浏览器，关不关由你决定。

配置

把你的选择写进 skill 目录下的 .local-config.json，就不用每次重问：

{
  "browserMode": "cdp",
  "cdpUrl": "http://127.0.0.1:9222",
  "chromePath": "",
  "headless": false,
  "profileDir": ""
}

字段	说明
browserMode	cdp / launch-chrome / mcp；留空则每次询问
cdpUrl	只允许本机回环地址；远端或带凭据的地址不会写入
chromePath	Chrome 路径；留空自动探测
headless	无图形界面必须为 true
profileDir	独立 Profile 目录；留空用临时目录

参考 .local-config.example.json。该文件已被 .gitignore 排除。

能力一览

SKILL.md 是入口，按需读取 references/ 下的子能力文档：

能力	文档
浏览器会话	references/browser/session.md
访问与登录	references/browser/access-and-login.md
菜单提取	references/exploration/menu-tree.md
页面探索	references/exploration/page-exploration.md
截图脱敏	references/screenshots/redaction.md
截图与标注	references/screenshots/capture-and-annotation.md
文档写作	references/writing/manual-writing.md

配套脚本在 scripts/：访问检查、关闭页面障碍、截图脱敏、标注截图、任务状态管理， 以及上面两个 Chrome CDP 启停脚本。

开发

npm install
npm test

测试用系统 Chrome 跑（channel: 'chrome'），不下载浏览器。

许可

MIT