frontend-code-review

# 前端代码评审 在以下场景使用该 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`（使用当前时间戳） - 保存后告知用户报告文件路径 要具体且可执行。 不要只给出"优化性能"这类空泛建议，而不指出具体代码模式。