- name
- frontend-code-review
- description
- 从架构、可维护性、类型安全、可访问性、样式一致性、性能和可测试性等角度审查前端代码，并将报告保存为 Markdown 文件。当用户要求代码审查、Review、评审代码质量时自动激活。
- version
- 1.1.0
前端代码评审
在以下场景使用该 Skill：
- 评审 Vue、React、TypeScript、样式、hooks/composables 以及 UI 层代码
- 检查新代码是否符合团队标准
- 在合并前评审设计稿转代码的实现结果
评审维度
- 架构
- 组件边界是否清晰
- 展示逻辑与业务逻辑是否分离
- 是否有可复用抽象
- 是否存在上帝组件
- 类型安全
- 是否存在不必要的
any - props 类型是否明确
- hooks/composables 返回值是否稳定
- 在可行情况下 API 契约是否有类型约束
- 渲染与状态
- 是否存在不必要的重复渲染
- key 的使用是否稳定
- 可推导状态是否被重复存储
- 本地状态是否耦合过深
- 样式
- 已有 Token 时是否还在使用 magic number
- 类名是否与仓库约定一致
- 响应式处理是否明确
- 是否无必要地混用了多套样式体系
- 可访问性
- 语义结构是否合理
- 是否在需要时正确使用 label 和 aria
- 是否支持键盘操作
- 浮层和菜单的焦点管理是否正确
- 可维护性
- 文件体积是否合理
- 命名质量是否良好
- 是否有应该提取的重复逻辑
- 是否存在死代码、过期注释或临时性 hack
- 测试
- 是否缺少关键测试覆盖
- 是否存在脆弱的选择器或不稳定的测试模式
- 安全
- 无明显 XSS 风险（dangerouslySetInnerHTML / v-html 必须审查）
- 无敏感信息硬编码
- 无未校验的用户输入直接渲染
- 必检项（阻塞合并）
- [ ] TypeScript 类型完整，无
any - [ ] 无 XSS 风险
- [ ] 无敏感信息硬编码
- [ ] 核心逻辑有单元测试
- 质量项（建议修改）
- [ ] 组件复杂度合理（单文件 < 300 行）
- [ ] 无重复代码（DRY 原则）
- [ ] 无未使用的 import
- 规范项（风格建议）
- [ ] 命名语义清晰
- [ ] 注释覆盖复杂逻辑
评审输出格式
# 代码审查报告
> 生成时间: YYYY-MM-DD HH:mm
> 评审工具: frontend-craft
## 🔴 必须修改 (N项)
- **[文件:行号]** 问题描述 → 建议修改
## 🟡 建议优化 (N项)
- ...
## 🔵 可选优化项 (N项)
- ...
## 🟢 做得好的地方
- ...
## 风险等级：低 / 中 / 高
**总体评价**: 可合并 / 待修改后合并 / 需要重构报告文件输出
评审完成后，必须将报告内容使用 Write 工具保存为 Markdown 文件：
- 目录：项目根目录下的
reports/（如不存在则创建） - 文件名：
code-review-YYYY-MM-DD-HHmmss.md（使用当前时间戳） - 保存后告知用户报告文件路径
要具体且可执行。 不要只给出"优化性能"这类空泛建议，而不指出具体代码模式。