frontend-bug-triage

name	frontend-bug-triage
displayName	前端 Bug 排查
description	排查并修复前端渲染、状态、表单、表格、路由、API 映射、异步时序和性能回归问题时使用。要求可复现、可定位、可验证、最小修复。
triggers	["前端bug","页面异常","表单异常","列表异常","路由异常","接口字段不对","时序问题"]
autoTrigger	true
version	1.0.0

前端 Bug 排查

前置检查

1. 读取 AGENTS.md，确认 techStack 为 frontend-vue3 或 frontend-react-umi。
2. 若不是前端 profile，跳过本 skill，回退到通用排查流程。
3. 先收集复现路径，不在缺少复现信息时直接猜改。

排查流程

1. 明确现象、复现步骤、触发条件和期望行为。
2. 判断问题类型：数据、状态、视图、路由、API 契约、异步时序或样式。
3. 沿数据流定位：入口参数 -> 请求 -> 响应映射 -> 状态 -> 渲染 -> 用户交互。
4. 列出根因候选，优先验证最小闭环。
5. 给出最小修复方案和回归清单。

常见根因

• 监听源不稳定、依赖过多或深监听误触发。
• 并发请求慢响应覆盖新状态。
• null、undefined、空字符串、数字 0 的分支判断混用。
• 列表 key 不稳定导致行状态串污染。
• 表单打开、回填、重置、关闭顺序冲突。
• API 字段命名或可空约定与页面模型不一致。

输出格式

1. 复现条件
2. 初步定位
3. 根因判断
4. 修复方案
5. 涉及文件
6. 回归清单