Claude 必备技能 Code Review

一、基础代码评审核心能力（插件内置核心）

1. 语法与规范校验

1. 语言全覆盖：JS/TS/Vue/React/HTML/CSS/SCSS/Go/Java/Python/小程序等前端全栈代码
2. 编码规范检查
   • ESLint、Prettier、Stylelint 规则匹配，识别未格式化、缩进、引号、分号、换行问题
   • 命名规范：变量/函数/组件/常量驼峰、大驼峰、全大写常量、语义化命名缺陷
   • 文件分层规范：目录结构、组件拆分、工具函数抽离判定
3. 类型安全审查（TS重点）
   • 缺失类型、any滥用、类型不匹配、泛型滥用、缺失 .d.ts 声明
   • 组件 Props、接口、返回值类型漏洞、空值未做可选/空判断

2. 业务逻辑缺陷排查

• 空值、边界值、异常分支遗漏（未判空、数组为空、接口报错无兜底）
• 循环/异步逻辑问题：重复请求、闭包陷阱、setTimeout 变量丢失、Promise 未捕获异常
• 状态管理漏洞：Vue Pinia/React Zustand 数据污染、未做浅深拷贝、重复赋值
• 表单逻辑：缺少校验、防抖节流缺失、重复提交、级联逻辑错误

二、前端专项评审（贴合 frontend-design）

1. 样式层评审

• Tailwind/CSS 冗余样式、重复类名、无效选择器、权重冲突
• 布局隐患：Flex/Grid 适配缺陷、移动端溢出、固定定位遮挡、滚动异常
• 主题/设计规范：未统一 Design Token、硬编码色值/字号、缺少暗色模式兼容
• 性能问题：大量全局样式污染、过度动画、频繁重排重绘代码

2. 组件设计评审

• 组件职责单一性：一个组件承担过多业务，未拆分原子/业务组件
• 复用性缺陷：重复代码未抽离公共组件、工具方法、hooks
• 传参规范：透传冗余参数、未限制 props、未做默认值、事件命名不统一
• 渲染性能：无效重复渲染、未使用 memo/computed/useMemo、长列表无虚拟滚动

3. 工程化代码评审

• 构建配置：Vite/Webpack 不合理分包、资源未压缩、环境变量硬编码
• 资源处理：图片未懒加载、未使用 WebP、大资源未分片、无用导入未删除
• 路由/权限：路由守卫缺失、页面按钮权限硬编码、未封装权限指令

三、性能与安全专项评审（Code Review 插件重点）

1. 前端性能问题识别

• 内存泄漏：未销毁定时器、监听事件、DOM 观察者、全局挂载变量
• 网络损耗：无请求防抖、重复接口请求、未缓存接口数据、大量并发请求
• 渲染损耗：大数组全量渲染、未分页、频繁 DOM 操作、不必要的实时监听

2. 前端安全漏洞扫描

• XSS 风险：innerHTML 直接渲染用户输入、未转义文本、危险 eval
• 敏感信息：接口密钥、token、账号硬编码在前端代码
• 接口风险：无请求拦截、错误信息直接暴露给用户、未做请求超时/失败兜底
• 存储风险：localStorage 存放敏感数据、未做过期清理

四、代码质量与可维护性评审

1. 注释与文档
   • 复杂逻辑缺少注释、函数无入参出参说明、组件无使用示例
   • 废弃代码未删除、大量注释掉的冗余代码
2. 复用与抽象
   • 重复业务逻辑复制粘贴，未封装 Hooks/工具函数/公共组件
   • 魔法数字、硬编码文案、接口地址未抽离常量文件
3. 兼容性缺陷
   • iOS/Android 特殊样式、浏览器 API 未做兼容判断
   • 低版本框架 API 废弃写法、未使用替代方案

五、工程协作规范评审

1. Git 相关：文件大量无意义改动、跨业务无关代码混在同一提交
2. 测试覆盖：核心工具/组件无单元测试、边界场景未覆盖
3. 代码分层：接口请求、业务逻辑、视图渲染耦合严重，未分层解耦

六、Code Review 插件专属输出能力（Claude 自带插件特有）

1. 分等级标注问题：严重阻断 bug / 性能隐患 / 规范优化 / 可优化建议
2. 精准定位代码行号，给出可直接替换的修复代码片段
3. 区分修复方案：最小改动修复、重构优化两种方案
4. 输出标准化评审报告：问题分类、风险等级、修改建议、优化收益
5. 支持批量评审：整个文件/整个目录批量扫描，汇总全部问题
6. 可生成优化重构方案：组件拆分、hooks 抽离、工具函数封装完整代码

七、搭配 frontend-design 联合使用必备能力

1. 评审 UI 还原代码：对比设计规范，找出尺寸、色值、间距不统一问题
2. 动效代码评审：动画性能损耗、过渡卡顿、Lottie 资源冗余问题
3. 大屏/可视化代码评审：ECharts 重复实例、图表自适应失效、大数据渲染卡顿
4. 多端适配评审：H5/小程序/PC 样式差异、多端逻辑重复未统一封装

八、高阶加分评审能力

1. 微前端代码评审：样式隔离失效、全局变量冲突、应用通信漏洞
2. 低代码平台代码评审：动态 JSON 渲染组件漏洞、表单引擎逻辑缺陷
3. 跨语言混合评审：TS + Go 前后端接口字段不匹配、参数类型不一致

配套 Claude 提示词（直接复制使用）

使用内置 code-review 插件对当前代码进行完整评审，覆盖：语法规范、TS类型、业务逻辑bug、性能隐患、前端样式规范、安全漏洞、代码复用性，区分风险等级，给出可直接替换的修复代码，输出结构化评审报告。