HomeBrowseUpload
← Back to registry
// Skill profile

前端代码评审

name: frontend-code-review

by bovinphang · published 2026-04-01

API集成
Total installs
0
Stars
★ 0
Last updated
2026-04
// Install command
$ claw add gh:bovinphang/bovinphang-frontend-code-review
View on GitHub
// Full documentation

---

name: frontend-code-review

description: 从架构、可维护性、类型安全、可访问性、样式一致性、性能和可测试性等角度审查前端代码,并将报告保存为 Markdown 文件。当用户要求代码审查、Review、评审代码质量时自动激活。

version: 1.1.0

---

# 前端代码评审

在以下场景使用该 Skill:

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

    1. 架构

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

  • 是否存在不必要的 `any`
  • props 类型是否明确
  • hooks/composables 返回值是否稳定
  • 在可行情况下 API 契约是否有类型约束
  • 3. 渲染与状态

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

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

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

  • 文件体积是否合理
  • 命名质量是否良好
  • 是否有应该提取的重复逻辑
  • 是否存在死代码、过期注释或临时性 hack
  • 7. 测试

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

  • 无明显 XSS 风险(dangerouslySetInnerHTML / v-html 必须审查)
  • 无敏感信息硬编码
  • 无未校验的用户输入直接渲染
  • 9. 必检项(阻塞合并)

  • [ ] TypeScript 类型完整,无 `any`
  • [ ] 无 XSS 风险
  • [ ] 无敏感信息硬编码
  • [ ] 核心逻辑有单元测试
  • 10. 质量项(建议修改)

  • [ ] 组件复杂度合理(单文件 < 300 行)
  • [ ] 无重复代码(DRY 原则)
  • [ ] 无未使用的 import
  • 11. 规范项(风格建议)

  • [ ] 命名语义清晰
  • [ ] 注释覆盖复杂逻辑
  • 评审输出格式

    # 代码审查报告
    
    > 生成时间: YYYY-MM-DD HH:mm
    > 评审工具: frontend-craft
    
    ## 🔴 必须修改 (N项)
    - **[文件:行号]** 问题描述 → 建议修改
    
    ## 🟡 建议优化 (N项)
    - ...
    
    ## 🔵 可选优化项 (N项)
    - ...
    
    ## 🟢 做得好的地方
    - ...
    
    ## 风险等级:低 / 中 / 高
    
    **总体评价**: 可合并 / 待修改后合并 / 需要重构

    报告文件输出

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

  • 目录:项目根目录下的 `reports/`(如不存在则创建)
  • 文件名:`code-review-YYYY-MM-DD-HHmmss.md`(使用当前时间戳)
  • 保存后告知用户报告文件路径
  • 要具体且可执行。

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

    // Comments
    Sign in with GitHub to leave a comment.
    // Related skills

    More tools from the same signal band