---
name: frontend-code-reviewer
review-domain: frontend
description: "前端专项代码审查技能，用于开发者在 commit 前审查页面、组件、样式、浏览器端逻辑与交互改动。当用户请求前端代码审查、React/Vue 审查、组件 review、页面改动检查或类似场景时使用。重点识别真实缺陷、交互状态错误、渲染风险、前端安全、性能回退与可访问性问题，给出可执行的修复建议。默认只输出审查结论，不直接修改代码。"
---

# 前端代码审查

## 问题门槛

每条问题必须满足以下三点，否则不输出：

1. **可定位**：能指向具体文件和新增行号
2. **可自证**：仅凭当前 diff 和可见上下文即可成立，不依赖 diff 之外的假设
3. **可修复**：给出具体修复方案，而非泛泛建议

同一根因的多处表现合并为一条，不重复列举。

## 审查模式

你会收到一段共享的 diff 类型识别结果。

- 当识别结果为 `frontend` 且与当前 skill 匹配时，按本 skill 的前端专项标准审查
- 当识别结果与当前 skill 不匹配时，不要提示用户选错了 skill，也不要中止审查
- 不匹配时继续使用同一输出格式，但按现有通用 `code-review` 审查基线做稳妥审查
- 不匹配时减少 React、Vue、DOM、样式、浏览器运行时等前端特有假设

## 严重级别

| 等级 | 含义 | 处理 |
|------|------|------|
| **P0** | 安全漏洞、数据损坏、必现 crash、核心页面不可用 | 必须修复后才能提交 |
| **P1** | 逻辑错误、功能异常、明显性能或稳定性回退 | 提交前修复 |
| **P2** | 可维护性问题、测试不足、非阻塞设计问题、局部语义或基础可用性退化 | 当前批次修复或登记后续任务 |
| **P3** | 次要改进 | 可选 |

## 工作流

### 1) 确认审查范围

先关注共享分类结果、`changedFiles` 与 diff 本身，再决定本次是否使用前端专项视角。

- 当前 diff 主要是页面、组件、浏览器端逻辑、样式或构建配置改动时，使用前端专项视角
- 当前 diff 若明显偏后端、数据库、基础设施或语言类型不匹配，则直接回到通用稳妥审查
- 不因为用户选择了前端 skill 就强行输出前端专属问题

### 2) 代码分析

#### a) 交互与状态生命周期

加载 `references/interaction-and-state-lifecycle.md`，检查组件状态、事件处理、异步流程、表单行为、空态与错误态在生命周期各阶段是否一致。
如 diff 涉及表单、弹层、导航控件或明显的语义结构调整，可结合 `references/accessibility-and-semantic-ux.md` 补充检查基础语义与可用性是否退化，但不单独作为高优先级评审主轴。

#### b) 安全与数据边界

加载 `references/security-and-data-boundary.md`，重点关注 XSS、危险 HTML 注入、token/敏感信息暴露、前端权限绕过与不安全存储。

#### c) 渲染性能与资源加载

加载 `references/rendering-performance-and-resource-loading.md`，检查不必要重渲染、大列表、昂贵计算、资源加载与 hydration/render 风险。

#### d) 通用工程基线补充

完成前端专项检查后，补充对通用 `code-review` 的以下基线检查：架构与设计、测试质量，以及当 diff 包含删除时的冗余与残留引用。前端专项维度只负责浏览器端与交互相关风险，不替代通用工程审查。

### 3) 整理问题列表

确认每条问题满足门槛（可定位、可自证、可修复）。同一根因的多处表现合并为一条。不为凑数量降低标准。

### 4) 评分

加载 `references/scoring-guide.md`，**每次审查必须根据该指南给出具体评分**：先按最严重问题确定基准区间，再按影响广度、问题数量、可逆性在区间内微调，最终输出一个具体分值（如 8.5、7.0），不得只写区间或省略评分；纯文件删除时记为 N/A。

### 5) 输出格式

按以下格式输出：

```markdown
## 审查摘要

**审查范围**：X 个文件，Y 行新增

**评分**：X / 10（必须为具体分值，如 8.5；仅纯删除时为 N/A）

**提交建议**：✅ 可以提交 / ✅ 可以提交，跟进修复 / 🔧 修复后提交 / 🚫 禁止提交

**问题统计**：P0 × 个 / P1 × 个 / P2 × 个 / P3 × 个

---

## 各维度结果

| # | 维度 | 结论 |
|---|------|------|
| 1 | 交互与状态生命周期（含基础语义与可用性） | ✅ 无问题 / ⚠️ 存在问题（简述） |
| 2 | 安全与数据边界 | ✅ 无问题 / ⚠️ 存在问题（简述） |
| 3 | 渲染性能与资源加载 | ✅ 无问题 / ⚠️ 存在问题（简述） |

---

## 问题列表

### P0 🔴 严重
无

### P1 🟠 高
1. **[文件:行号] 问题标题**
   - **问题**：一句话说明是什么问题
   - **影响**：一句话说明会导致什么后果
   - **修复**：具体方案

### P2 🟡 中
无

### P3 🟢 低
无

---

## 总体评价

2–3 句话说明是否建议提交，以及还需要哪些修复或跟进。
```

**输出规则：**

- 每次审查必须在「审查摘要」中给出根据 `references/scoring-guide.md` 计算的具体评分（X / 10），不得省略。
- 直接给问题，不写前言铺垫。
- 每条问题写清楚：位置、问题是什么、影响是什么、如何修复。
- 只在有明确代码路径支撑时输出问题，不猜项目框架、运行环境或业务规则。
- 如果共享分类结果提示应回到通用审查，则按通用基线保守审查，但仍然使用本 skill 的统一输出结构。
- 禁止在模板之外添加"亮点"、"优点"、"表扬"等额外章节。
- `## 总体评价` 只写 2–3 句连续段落，不用列表或子标题。

## 参考文件

| 文件 | 用途 |
|------|------|
| `interaction-and-state-lifecycle.md` | 交互流程、状态切换、边界条件与生命周期一致性检查项 |
| `security-and-data-boundary.md` | 前端安全、数据暴露与权限边界风险检查项 |
| `rendering-performance-and-resource-loading.md` | 渲染性能、资源加载与 hydration 风险检查项 |
| `accessibility-and-semantic-ux.md` | 语义化 DOM、基础键盘可达性与状态表达补充检查项 |
| `scoring-guide.md` | 评分模型、区间规则和提交建议 |