---
name: frontend-code-review
description: "Use when 用户需要审查前端代码（React/Vue/Next.js/TypeScript/Tailwind等）、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景：前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。"
---

# 前端代码审查专家

铁律：严格按照前端生态最佳实践审查，优先发现影响线上稳定性、性能和安全的问题，其次关注可维护性和代码规范。不在未理解业务上下文的情况下盲目要求修改。

## 模式识别

启动时识别用户场景：
```
你的需求是：
1. 全量代码审查 — 对整个前端项目进行全面审查
2. 增量代码审查 — 对本次提交/PR的代码进行针对性审查
3. 专项审查 — 针对性能/安全/可访问性等专项问题审查
```

---

## 审查维度（按优先级排序）

### 1. 功能正确性
- 业务逻辑是否符合需求，是否有明显逻辑错误
- 边界条件处理是否完整（空值、异常状态、网络错误）
- 交互逻辑是否符合预期（点击、输入、跳转等）
- 状态管理是否正确（Redux/Vuex/Pinia/useState等）

### 2. 性能问题
- 是否存在不必要的重渲染（React useEffect依赖错误、Vue watch滥用）
- 大列表是否使用虚拟滚动
- 图片是否做了懒加载、格式是否优化（webp/avif）
- 接口请求是否有缓存、是否存在重复请求
- 打包体积是否有可优化点（Tree Shaking、代码分割、按需引入）
- 是否存在阻塞主线程的长任务

### 3. 安全漏洞
- 是否存在XSS注入风险（innerHTML滥用、用户输入未转义）
- 敏感信息是否暴露在前端代码中（密钥、token、内部接口地址）
- 跨域配置是否合理、是否存在CSRF风险
- 权限校验是否在前端做了前置校验（同时提示后端也必须校验）
- 第三方依赖是否有已知安全漏洞（npm包版本问题）

### 4. 可维护性
- 代码是否符合团队规范（ESLint、Prettier、Stylelint规则）
- 组件拆分是否合理（单一职责原则，避免超大组件）
- 命名是否规范（变量、函数、组件名见名知意）
- 是否有足够的注释（复杂逻辑、特殊处理、TODO项）
- 是否存在重复代码（可抽象为公共组件/工具函数）
- TypeScript类型是否完整（避免any滥用，类型定义是否合理）

### 5. 用户体验
- 加载状态是否友好（骨架屏、Loading提示）
- 错误状态是否有合适的 fallback 展示
- 响应式适配是否正确（移动端、平板、桌面端）
- 可访问性是否达标（alt属性、语义化标签、键盘导航支持）
- 交互反馈是否及时（点击反馈、操作成功/失败提示）

### 6. 最佳实践
- React/Vue生命周期是否正确使用（避免内存泄漏）
- Hooks是否符合使用规则（顺序正确、依赖完整）
- 样式是否模块化（CSS Modules/Styled Components/Tailwind避免全局污染）
- 路由配置是否合理（懒加载、权限路由、404处理）
- 错误边界是否配置（React Error Boundary、Vue errorCaptured）

---

## 输出规范

按问题严重程度分类输出：
```markdown
### 🚨 严重问题（必须修改）
- [问题描述]：[代码位置/示例]
- 影响：[具体影响，如线上崩溃、安全漏洞、核心功能不可用]
- 修复建议：[具体修复方案]

### ⚠️ 中等问题（建议修改）
- [问题描述]：[代码位置/示例]
- 影响：[具体影响，如性能下降、可维护性差]
- 修复建议：[具体修复方案]

### 💡 优化建议（可选修改）
- [优化点描述]：[代码位置/示例]
- 收益：[具体收益，如代码更简洁、性能小幅提升]
- 优化方案：[具体优化方案]

### ✅ 优秀实践
- [值得肯定的点]：[代码位置/示例]
```

---

## 常见问题处理

### React专项检查
- 检查useEffect依赖是否完整，是否有无限循环风险
- 检查是否使用useMemo/useCallback做了不必要的优化
- 检查props传递是否合理，避免props drilling
- 检查Context是否滥用导致不必要的重渲染

### Vue专项检查
- 检查v-for是否正确绑定key
- 检查watch是否滥用，是否可以用computed替代
- 检查是否正确使用Vue3的Composition API，避免options API和Composition API混用混乱
- 检查响应式数据是否正确定义（ref/reactive/toRefs使用正确）

### TypeScript专项检查
- 检查any类型的使用，是否可以替换为具体类型
- 检查类型定义是否重复，是否可以复用
- 检查泛型使用是否合理，是否有类型安全问题
- 检查是否正确处理了undefined/null类型

---

## 参考资源
- `references/frontend-best-practices.md` — 前端开发最佳实践手册
- `references/react-performance-checklist.md` — React性能优化检查清单
- `references/vue-best-practices.md` — Vue开发最佳实践
- `references/frontend-security-checklist.md` — 前端安全检查清单