メニュー
审核前端项目 git 变动文件的代码质量，按严重程度输出审核结果。 用于：用户要求审核前端代码、前端代码 review、检查前端代码质量、review Vue/React 改动、审核组件代码、PR 前端审核、前端提交前检查时触发。 即使用户没有明确说"前端代码"，只要审核对象是前端文件（.vue/.tsx/.jsx/.css 等），也应使用此技能。 不用于审核后端代码、直接修改或重构前端代码、生成组件业务说明，也不用于执行 lint 或格式化。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
创建符合国人审美的网页界面设计。当用户需要设计网页、组件、页面或应用界面时使用。 专注于简洁、精致、和谐的设计风格，生成可直接使用的前端代码。 不用于审核已有 UI 代码、优化现有组件实现，也不用于生成纯后端代码或非 Web 端 UI。
用于撰写技术文章、技术教程、经验总结类长文。 当用户明确要写技术文章、技术博客、技术教程、踩坑记录、优化案例时触发。
创建或更新 AI 全栈 Web 项目的 PRD 产品需求文档。 用于用户明确要求生成 PRD、补充 PRD 内容、或更新现有 PRD 时触发。 不用于生成普通技术文档、API 文档或仅修改代码的场景。
管理项目的分层记忆系统，包括 work-log 更新、新记忆生成、容量检查和归档。 由用户手动执行本技能后触发记忆更新，不用于普通查询或非提交场景。
在目标项目中一键启用分层记忆管理系统，生成规则、技能和记忆库结构。 仅在用户明确要求为项目添加记忆功能时使用，不用于查询记忆、更新现有记忆或初始化普通配置文件。
创建基于当前技能 `scripts/` 参考工程的 Node.js + TypeScript 脚本项目骨架，或按同一结构补齐空白/轻量脚本项目。 当用户需要快速落地命令行脚本、批处理脚本或文件处理流水线时触发，不用于后端服务、前端项目、单文件脚本片段或成熟项目重构。
| name | yy-frontend-review |
| description | 审核前端项目 git 变动文件的代码质量，按严重程度输出审核结果。 用于：用户要求审核前端代码、前端代码 review、检查前端代码质量、review Vue/React 改动、审核组件代码、PR 前端审核、前端提交前检查时触发。 即使用户没有明确说"前端代码"，只要审核对象是前端文件（.vue/.tsx/.jsx/.css 等），也应使用此技能。 不用于审核后端代码、直接修改或重构前端代码、生成组件业务说明，也不用于执行 lint 或格式化。 |
对前端项目 git 变动文件进行代码审核，覆盖 Vue2/Vue3/React/原生 JS/TS/CSS 等技术栈，优先审查变更行及必要上下文，按严重程度输出问题描述、影响和修复建议。
审核覆盖类型安全、状态管理（Pinia/Redux Toolkit/Zustand）、TypeScript 类型质量等现代前端关注点。
核心原则：默认只审核，不修改代码；只有用户明确要求修复时，才进入代码修改流程。
不应触发：
按以下规则获取需要审核的文件。
决策分支：
默认使用以下命令获取 git 变更：
git diff --name-only HEAD
git diff --cached --name-only
支持的前端文件类型：
.js、.jsx、.ts、.tsx、.vue.css、.scss、.less.html默认排除以下文件和目录：
node_modules/、dist/、build/、coverage/、.next/、.nuxt/、.output/package-lock.json、pnpm-lock.yaml、yarn.lock、*.min.js、*.generated.*大变更量处理：
变更文件超过 20 个时，按以下优先级分层审核：
如果变更量超出上下文窗口，告知用户变更范围过大，建议分批审核或缩小指定范围。
优先审查 diff 变更行，并按需读取上下文。
决策分支：
上下文读取规则：
对每个目标文件按以下规则检查。规则按框架/语言特征自动适用，不要求预先声明。框架特定规则优先于通用规则。
.vue 文件中使用 Options API（data/methods/computed/watch）、beforeDestroy/destroyed 生命周期、this.$emit/this.$refs、Vue.filter/Vue.directive、mixin.vue 文件中使用 <script setup>、defineProps/defineEmits、ref/reactive/computed/watch、onUnmounted/onMounted、setup() 函数、provide/inject.jsx/.tsx 文件、useState/useEffect/useCallback/useMemo、dangerouslySetInnerHTML、JSX 语法、函数组件、类组件.ts、.tsx，或 .vue 文件中 <script lang="ts">；代码中出现 interface、type、enum、as、<T>、extends（泛型语境）同一文件同时包含多个特征时，合并适用对应规则。
catch 块中用于记录异常的 console.warn 不视为问题以下规则适用于所有前端代码。
严重：
v-html；React：dangerouslySetInnerHTML；原生：innerHTML）beforeDestroy；Vue3：onUnmounted/onBeforeUnmount；React：useEffect 清理函数）；组件卸载后仍尝试更新状态props 对象属性；React 中直接修改 props）；异步更新导致状态竞态；未清理的订阅v-for 缺少 :key；React：缺少 key 或使用数组索引作为动态列表的 key）中等：
console.log、debugger 遗留在生产代码中（try-catch/catch 块中用于记录异常的 console.warn/console.error 不视为问题）a?.b?.c 访问属性但未提供兜底值（如 ?? 默认值、|| 默认值），导致链路结果为 undefined 可能引发下游错误computed；React：缺少 useMemo/useCallback）；大列表未虚拟化；图片未懒加载type/default/validator；Vue3：defineProps 缺少类型声明；React：缺少 propTypes 或 TypeScript 接口）或默认值；回调未做防抖/节流!important 滥用；全局样式污染；z-index 层级混乱；样式隔离穿透不当（Vue：scoped 样式的 /deep/、::v-deep、:deep() 使用过宽；React：CSS Modules 命名冲突、内联样式滥用）aria 属性；键盘导航不可达；表单缺少 label；语义化标签使用不当轻微：
识别到对应框架或语言特征时，读取并合并适用以下专项规则：
| 场景 | 处理方式 |
|---|---|
| 删除文件 | 只评估删除是否影响组件引用、路由、导出、样式或配置，不审查已删除内容 |
| 重命名文件 | 按新路径和实际 diff 审查，检查导入路径是否同步更新 |
| 大型组件 | 优先审查 diff hunk；超过 500 行时按函数或模块分段读取 |
| 仅样式改动 | 重点检查选择器冲突、响应式断点、主题变量、布局溢出 |
| 仅模板改动 | 重点检查无障碍属性、语义化标签、事件绑定、条件渲染逻辑 |
| 仅脚本改动 | 重点检查类型安全、异步处理、状态管理、事件清理 |
| 配置文件改动 | 重点检查构建配置、环境变量暴露、依赖版本、代理规则 |
| 新增组件或页面 | 检查路由、导航、导入、Props 定义、样式隔离、事件注册是否同步完成 |
| 无法确认的问题 | 标记为"需人工确认"，说明原因和建议确认方式 |
决策分支：
输出要求：
文件路径:行号 格式，使用相对于项目根目录的路径vue、typescript、css）通过格式：
## 审核结果：通过
### 问题统计
- 审核文件数：N
- 严重：0 个
- 中等：0 个
- 轻微：Z 个
### 轻微问题
[如无轻微问题，写"未发现轻微问题。"]
不通过格式：
## 审核结果：不通过
### 问题统计
- 审核文件数：N
- 严重：X 个
- 中等：Y 个
- 轻微：Z 个
### 问题详情
#### 严重问题
1. **问题类型**：[类型]
- **位置**：文件路径:行号
- **描述**：[问题说明]
- **影响**：[可能造成的后果]
- **代码片段**：
```语言
[相关代码]
```
- **修复建议**：[具体可执行建议]
#### 中等问题
[同上]
#### 轻微问题
[同上，可简化代码片段]
### 修复优先级
1. 先修复严重问题。
2. 再修复中等问题。
3. 轻微问题可按团队规范决定是否处理。
允许执行的操作：
禁止主动执行的操作：