前端代码评审

在以下场景使用该 Skill：

• 评审 Vue、React、TypeScript、样式、hooks/composables 以及 UI 层代码
• 检查新代码是否符合团队标准
• 在合并前评审设计稿转代码的实现结果

评审维度

1. 架构

• 组件边界是否清晰
• 展示逻辑与业务逻辑是否分离
• 是否有可复用抽象
• 是否存在上帝组件

2. 类型安全

• 是否存在不必要的

  any

• props 类型是否明确
• hooks/composables 返回值是否稳定
• 在可行情况下 API 契约是否有类型约束

3. 渲染与状态

• 是否存在不必要的重复渲染
• key 的使用是否稳定
• 可推导状态是否被重复存储
• 本地状态是否耦合过深

4. 样式

• 已有 Token 时是否还在使用 magic number
• 类名是否与仓库约定一致
• 响应式处理是否明确
• 是否无必要地混用了多套样式体系

5. 可访问性

• 语义结构是否合理
• 是否在需要时正确使用 label 和 aria
• 是否支持键盘操作
• 浮层和菜单的焦点管理是否正确

6. 可维护性

• 组件/页面文件规模是否合理（宜约 300 行内；逾 500 行或复杂度过高须拆分，见

  templates/rules/react.md

  /

  vue.md

  「组件文件规模」）
• 命名质量是否良好
• 是否有应该提取的重复逻辑
• 是否存在死代码、过期注释或临时性 hack
• 业务状态、类型、标识是否用裸数字/裸字符串（应对齐

  templates/rules/typescript.md

  「禁止 Magic Number / Magic String」）

7. 测试

• 是否缺少关键测试覆盖
• 是否存在脆弱的选择器或不稳定的测试模式

8. 安全

• 无明显 XSS 风险（dangerouslySetInnerHTML / v-html 必须审查）
• 无敏感信息硬编码
• 无未校验的用户输入直接渲染

9. 必检项（阻塞合并）

• TypeScript 类型完整，无

  any

• 无 XSS 风险
• 无敏感信息硬编码
• 核心逻辑有单元测试

10. 质量项（建议修改）

• 组件文件规模符合约定（约 300 行内为佳；逾 500 行或高复杂度已拆子组件 / Hooks / Composables / utils）
• 无重复代码（DRY 原则）
• 无未使用的 import

11. 规范项（风格建议）

• 命名语义清晰
• 注释覆盖复杂逻辑

评审输出格式

# 代码审查报告

> 生成时间: YYYY-MM-DD HH:mm
> 评审工具: frontend-craft

## 🔴 必须修改 (N项)
- **[文件:行号]** 问题描述 → 建议修改

## 🟡 建议优化 (N项)
- ...

## 🔵 可选优化项 (N项)
- ...

## 🟢 做得好的地方
- ...

## 风险等级：低 / 中 / 高

**总体评价**: 可合并 / 待修改后合并 / 需要重构

报告文件输出

评审完成后，必须将报告内容使用 Write 工具保存为 Markdown 文件：

• 目录：项目根目录下的

  reports/

  （如不存在则创建）
• 文件名：

  code-review-YYYY-MM-DD-HHmmss.md

  （使用当前时间戳）
• 保存后告知用户报告文件路径

要具体且可执行。 不要只给出"优化性能"这类空泛建议，而不指出具体代码模式。

与子代理的配合

需要基于 git diff、按 CRITICAL / HIGH / MEDIUM / LOW 分级、合并同类问题并输出 Review Summary 表 时，可委托插件内置的

frontend-code-reviewer

子代理；报告文件命名与本 Skill 相同（

code-review-YYYY-MM-DD-HHmmss.md

）。