メニュー
从前端代码中定位后端接口的使用情况、分析页面与接口的关联、生成面向不同角色的接口分析报告。当用户问到某个接口在哪些地方有调用、入参/出参如何被使用、页面调了哪些接口、字段与接口的对应关系、接口调用链路、页面接口发现报告时触发。也适合在开发前做方案对齐时使用，输入 PRD 或变更需求后自动分析影响范围。还能分析整个前端项目的架构和接口全景。使用场景包括：接口反向溯源、页面接口发现、全项目接口摸底、前后端方案对齐、PRD 变更影响分析。适合后端、测试、产品同学了解前端接口使用全貌。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/gaorun/my-labs --skill frontend-scoutコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
统计代码量——包括代码行数、注释行数、空白行数，按语言/文件维度汇总。支持目录、压缩包、Git 仓库、两个版本差异对比。当用户说"统计代码量"、"代码行数"、"loc"、"cloc"、"看下代码规模"、"这个项目多大"、"代码行数统计"时触发。
为前端开发生成可执行的功能测试用例。基于PRD需求和代码变更分析影响面， 输出包含操作步骤、测试数据和预期结果的完整测试报告。 当用户说"帮我生成测试用例"、"生成测试报告"、"功能测试"或提到前端测试、 回归测试、测试覆盖时使用。
mermaid-cli (mmdc) 使用指南：将 Mermaid 定义文件(.mmd)转换为 SVG/PNG/PDF，支持 CI/CD 自动化、 Markdown 内嵌图表渲染、自定义主题和 CSS、批量转换。当用户提到渲染 Mermaid 图表、 把 .mmd 转成图片、自动化生成图表、在 CI 中构建 Mermaid 图、Markdown 里嵌入渲染后的图表、 自定义 Mermaid 图表样式/主题/字体、mmdc 报错或 Chromium 配置问题时触发。如果用户写出了 ```mermaid 代码块但需要渲染成图片文件，也应该触发此技能。
| name | frontend-scout |
| description | 从前端代码中定位后端接口的使用情况、分析页面与接口的关联、生成面向不同角色的接口分析报告。当用户问到某个接口在哪些地方有调用、入参/出参如何被使用、页面调了哪些接口、字段与接口的对应关系、接口调用链路、页面接口发现报告时触发。也适合在开发前做方案对齐时使用，输入 PRD 或变更需求后自动分析影响范围。还能分析整个前端项目的架构和接口全景。使用场景包括：接口反向溯源、页面接口发现、全项目接口摸底、前后端方案对齐、PRD 变更影响分析。适合后端、测试、产品同学了解前端接口使用全貌。 |
当用户提出以下任一需求时触发：
按以下规则判断走哪种模式：
Q&A 模式支持多轮对话：记住会话中讨论过的接口和页面，后续用户用代词指代时自动关联。
🔴 CHECKPOINT · 模式选择后：确认模式后进入对应工作流。如果用户中途改变需求（从查单个接口变为全模块梳理），重新判断模式。
输出前先判断受众。判断策略按模式区分：
语义推断：
🛑 STOP · 无法推断时，停下来询问用户：
这份报告主要给谁看？我可以针对性地调整内容侧重：
- 后端开发 — 接口约定、入参出参、职责划分
- 产品经理 — 业务逻辑还原、交互路径
- 测试人员 — 责任主体标注、重点验证点
- 前端开发 — 组件树、Props/事件、API 调用点
- 全都要 — 一份报告覆盖所有视角
确定受众后，加载对应的参考文件：
references/audience-backend.mdreferences/audience-product.mdreferences/audience-testing.mdreferences/audience-frontend.md以下约束并非全局禁用，而是根据受众调整：
| 约束 | 后端开发 | 产品经理 | 测试人员 | 前端开发 |
|---|---|---|---|---|
文件名/路径（如 io.js） | ✅ 允许 | ❌ 禁止 | ❌ 禁止 | ✅ 允许 |
函数名/变量名（如 fetchData） | ✅ 允许 | ❌ 禁止 | ❌ 禁止 | ✅ 允许 |
| 前端框架概念（组件、mounted、Vuex） | ⚠️ 仅在必要时使用 | ❌ 禁止 | ❌ 禁止 | ✅ 允许 |
代码条件表达式（type === 3） | ⚠️ 需同时写出业务含义 | ❌ 禁止 | ⚠️ 允许 | ⚠️ 需同时写出业务含义 |
规则：对于后端和前端受众，保留技术细节（文件名、字段名、函数名）并附加业务说明。对于产品和测试受众，一律翻译为纯业务语言。 例外：前端参考附录不受本约束限制。
关于表格的强制替代方案：凡是有多行多列对应关系的数据（如事件映射、状态码枚举、接口返回字段对照等），一律用列表格式，不要用表格。
反面案例（有表格）：
用户操作 回传事件 附带数据 密码正确 successtoken 正确做法（用列表）：
- 密码正确时 → 回传 success 事件，携带 token
- 点击关闭时 → 回传 close 事件，无附带数据
- 跳转其他页面时 → 回传 switch 事件
orderStatus 保留原名，附加"订单状态"中文说明。对产品和测试受众则只说"订单状态"status === 3）：写出数字值，标注"需与后端确认含义"0=待审核, 1=已通过, 2=已拒绝/api/order/:id 保留 :idaxios.get/post、request(、fetch(、服务名.api.xxxsrc/views/ 或路由 component；React 项目查路由 <Route> 或 pages/从调用文件沿 import 反向追溯到页面入口：
@/api/xxx.ts）：追溯到该模块并记录实际请求路径，不展开内部每个工作流的搜索阶段和分析阶段都可能失败。以下表格定义了各场景的触发条件、一线修复措施和仍失败的兜底行为。
| 触发条件 | 一线修复 | 仍失败兜底 |
|---|---|---|
| 全局搜索未找到接口路径或字段名 | 去掉前后缀/版本号/微服务名前缀再次搜索；搜索完整路径的后半段或关键字片段 | 告知用户"代码中未找到该接口的直接调用"，列出可能原因：① 接口路径写法不同（如大小写、下划线）② 通过动态拼接生成 ③ 前后端尚未联调。建议用户提供更精确的路径片段 |
| 追溯链路断裂（import 链中断，无法追溯到页面入口） | 搜索文件名关键特征或在相近目录就近搜索；尝试搜索路由配置中关联的组件名 | 只输出已追溯到的部分，在报告中标注"【⚠️ 部分链路断裂，以下为不完全分析】"，附上已找到的调用位置供手动对照 |
| 找不到页面入口（路由配置中无匹配项） | 按目录结构从调用文件向上回溯 2-3 层；搜索与文件路径关键词匹配的路由定义 | 确认调用文件路径但不关联页面，标注"【⚠️ 未找到路由配置，以下仅展示调用点，未关联页面】" |
| 触发条件 | 一线修复 | 仍失败兜底 |
|---|---|---|
| PRD 描述过于模糊，无法映射到具体代码 | 反问用户补充关键信息：涉及哪个页面、新增还是修改、是否有接口路径或字段参考 | 按需求拆解输出"待确认清单"，按页面/功能列每个待确认项，标注"【需确认】"并建议用户补充后再分析 |
| 接口返回字段含义无法从代码推断 | 搜索该字段在其他文件的消费上下文（赋值、渲染、判断）；搜索附近的中文文案或注释 | 标注"【⚠️ 字段含义需与后端确认】"，保留字段名（如有）供后续定位 |
| 枚举值映射找不到完整定义 | 搜索附近常量/枚举定义文件；搜索该枚举值在模板中的展示文案 | 输出已找到的部分映射，标注"【⚠️ 仅部分枚举值，缺失值需与后端确认】" |
| 触发条件 | 一线修复 | 仍失败兜底 |
|---|---|---|
| 某 sub-agent 超时或未返回结果 | 主 agent 自行搜索该接口/页面，限制搜索范围到关键文件 | 跳过该接口/页面，在报告中标注"【⚠️ 该部分因 {原因} 跳过，建议手动确认】" |
| Sub-agent 返回内容含代码/文件名（违反输出约束） | 主 agent 清洗后使用，原内容写入前端参考附录 | 要求该 sub-agent 重新输出；仍不合格则主 agent 自行处理 |
按用户操作生命周期组织，不用表格。格式模板见 templates/qa-output.md。
末尾附上前端参考附录。
使用 templates/report.md 中的结构。
已在确定受众后加载了对应的参考文件（见「受众对象判断」步骤 3），按参考文件中的结构组织报告内容。
如果受众为「全都要」，按后端 → 产品 → 测试 → 前端的顺序合并输出，每个受众章节独立成节。
用户输入 PRD 内容或提出"帮我分析这个需求"时进入此模式。
### 待确认清单
- **{变更项 1}**：{现有信息} → **待确认**：{需要补充什么}
- **{变更项 2}**：{现有信息} → **待确认**：{需要补充什么}
报告结构见 templates/prd-report.md。
每次输出最终版本前执行：
报告输出时使用 templates/frontend-appendix.md 中的格式。
按以下规则拆分子任务：
分配给 sub-agent 时包含：
分析过程中产生的中间文件（sub-agent 搜索结果、中间数据、草稿等），最终输出完成后必须删除。