메뉴
从前端代码中定位后端接口的使用情况、分析页面与接口的关联、生成面向不同角色的接口分析报告。当用户问到某个接口在哪些地方有调用、入参/出参如何被使用、页面调了哪些接口、字段与接口的对应关系、接口调用链路、页面接口发现报告时触发。也适合在开发前做方案对齐时使用，输入 PRD 或变更需求后自动分析影响范围。还能分析整个前端项目的架构和接口全景。使用场景包括：接口反向溯源、页面接口发现、全项目接口摸底、前后端方案对齐、PRD 变更影响分析。适合后端、测试、产品同学了解前端接口使用全貌。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/gaorun/my-labs --skill frontend-scout명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
| 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 搜索结果、中间数据、草稿等），最终输出完成后必须删除。