القائمة
Use when 用户需要审查前端代码（React/Vue/Next.js/TypeScript/Tailwind等）、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景：前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | frontend-code-review |
| description | Use when 用户需要审查前端代码（React/Vue/Next.js/TypeScript/Tailwind等）、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景：前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。 |
铁律：严格按照前端生态最佳实践审查，优先发现影响线上稳定性、性能和安全的问题，其次关注可维护性和代码规范。不在未理解业务上下文的情况下盲目要求修改。
启动时识别用户场景：
你的需求是：
1. 全量代码审查 — 对整个前端项目进行全面审查
2. 增量代码审查 — 对本次提交/PR的代码进行针对性审查
3. 专项审查 — 针对性能/安全/可访问性等专项问题审查
按问题严重程度分类输出：
### 🚨 严重问题（必须修改）
- [问题描述]：[代码位置/示例]
- 影响：[具体影响，如线上崩溃、安全漏洞、核心功能不可用]
- 修复建议：[具体修复方案]
### ⚠️ 中等问题（建议修改）
- [问题描述]：[代码位置/示例]
- 影响：[具体影响，如性能下降、可维护性差]
- 修复建议：[具体修复方案]
### 💡 优化建议（可选修改）
- [优化点描述]：[代码位置/示例]
- 收益：[具体收益，如代码更简洁、性能小幅提升]
- 优化方案：[具体优化方案]
### ✅ 优秀实践
- [值得肯定的点]：[代码位置/示例]
references/frontend-best-practices.md — 前端开发最佳实践手册references/react-performance-checklist.md — React性能优化检查清单references/vue-best-practices.md — Vue开发最佳实践references/frontend-security-checklist.md — 前端安全检查清单超压缩通信模式。通过去掉废话、冠词和客套语，在保持完整技术准确性的同时削减约 75% token 用量。 当用户说"caveman 模式"、"简洁模式"、"少废话"、"省 token"、"简短点"或调用 /caveman 时触发。
对用户的计划或设计进行不留情面的深度追问，直到达成共同理解，逐一解决决策树的每个分支。当用户想要压力测试计划、检验设计时触发。触发词：追问我、grill me、逐一问我、挑战我的方案、深度追问、质疑设计、设计评审追问。
将当前对话压缩为交接文档，供下一个 Agent 会话接续工作。触发词：交接、handoff、下一个会话、会话摘要、接续工作、传给下一个 agent。
在代码库中发现架构"深化"机会——将浅模块变成深模块的重构，提升可测试性和 AI 可导航性。与 architecture-advisor 互补：architecture-advisor 设计新架构，本技能改善现有代码库结构。触发词：改进代码库架构、架构深化、找重构机会、模块耦合太紧、难以测试、代码难以理解、架构改进、improve architecture、refactor opportunities。
快速验证设计的一次性原型。区分两条分支——逻辑/状态模型用终端交互 App，UI 布局用多变体路由切换。当用户想原型验证、检验数据模型或状态机、探索多种 UI 方案时触发。触发词：原型、prototype、验证方案、快速试验、让我玩一玩、试几个设计。
Use when 已有书面实施计划、任务相对独立，且在本会话内通过子代理逐任务落实时。触发场景：执行实施计划、子代理开发、按计划实现、Task 派发实现、两阶段代码审查、plan execution。