# Yy Frontend Review

> 审核前端项目 git 变动文件的代码质量，按严重程度输出审核结果。 用于：用户要求审核前端代码、前端代码 review、检查前端代码质量、review Vue/React 改动、审核组件代码、PR 前端审核、前端提交前检查时触发。 即使用户没有明确说"前端代码"，只要审核对象是前端文件（.vue/.tsx/.jsx/.css 等），也应使用此技能。 不用于审核后端代码、直接修改或重构前端代码、生成组件业务说明，也不用于执行 lint 或格式化。

- Skill: `bulls-cows/yy-frontend-review` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add bulls-cows/yy-frontend-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bulls-cows/yy-frontend-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: bulls-cows (https://skillmd.com/u/bulls-cows)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bulls-cows/yy-frontend-review

---


# yy-frontend-review

## 描述

对前端项目 git 变动文件进行代码审核，覆盖 Vue2/Vue3/React/原生 JS/TS/CSS 等技术栈，优先审查变更行及必要上下文，按严重程度输出问题描述、影响和修复建议。

审核覆盖类型安全、状态管理（Pinia/Redux Toolkit/Zustand）、TypeScript 类型质量等现代前端关注点。

核心原则：默认只审核，不修改代码；只有用户明确要求修复时，才进入代码修改流程。

## 使用场景

- 用户要求审核前端代码、前端代码 review、前端代码检查
- 用户提到"审核前端改动"、"review 前端代码"、"检查前端代码质量"
- 用户指定前端文件或目录范围，要求检查其中的代码质量
- 用户要求审核 UI 组件、页面布局、样式实现
- 用户说"帮我看看这几个 vue/react 文件"、"review 一下组件改动"
- PR 审核、合并前审核、提交前检查，且变更内容为前端代码

不应触发：

- 用户要求审核后端代码
- 用户要求审核全栈项目但未明确指定前端部分
- 用户要求直接修改代码（应使用其他优化或修复技能）
- 用户只是询问某个前端问题
- 用户要求生成 git 提交信息
- 用户要求运行构建、测试、部署或自动修复流程

## 指令

### 步骤 1. 获取审核目标

按以下规则获取需要审核的文件。

**决策分支**：

- **用户指定文件或目录**：优先使用用户指定范围，递归收集支持的前端文件
- **用户未指定范围**：使用 git 命令获取未暂存和已暂存的变更文件，并合并去重
- **无匹配前端文件**：回复"当前没有需要审核的前端代码变更文件。"并终止

默认使用以下命令获取 git 变更：

```bash
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 个时，按以下优先级分层审核：

1. 核心逻辑：组件、页面、路由、状态管理（优先审核）
2. 支撑代码：工具函数、类型定义、配置文件
3. 样式文件：CSS/SCSS/Less
4. 其他：HTML 模板、静态资源引用

如果变更量超出上下文窗口，告知用户变更范围过大，建议分批审核或缩小指定范围。

### 步骤 2. 确定审核范围

优先审查 diff 变更行，并按需读取上下文。

**决策分支**：

- **变更行可独立判断问题**：只基于变更行和相邻上下文（上下各 3 行）输出结论
- **问题依赖组件上下文**：读取完整组件后再判断
- **问题依赖跨文件调用链**：追踪相关调用链后再判断
- **历史遗留问题未被本次改动引入**：不作为本次审核阻断项，在"补充观察"中简要说明
- **上下文不足无法确认**：标记为"需人工确认"，说明缺失信息，不编造结论

**上下文读取规则**：

- 单行改动：读取前后各 3 行
- 函数/方法级改动：读取完整函数定义
- 组件级改动：读取完整组件文件
- 样式改动：读取完整样式块或样式文件
- 跨文件影响：读取相关依赖文件

### 步骤 3. 按维度审核代码

对每个目标文件按以下规则检查。规则按框架/语言特征自动适用，不要求预先声明。框架特定规则优先于通用规则。

#### 框架与语言识别

- **Vue2 特征**：`.vue` 文件中使用 Options API（`data`/`methods`/`computed`/`watch`）、`beforeDestroy`/`destroyed` 生命周期、`this.$emit`/`this.$refs`、`Vue.filter`/`Vue.directive`、mixin
- **Vue3 特征**：`.vue` 文件中使用 `<script setup>`、`defineProps`/`defineEmits`、`ref`/`reactive`/`computed`/`watch`、`onUnmounted`/`onMounted`、`setup()` 函数、`provide`/`inject`
- **React 特征**：`.jsx`/`.tsx` 文件、`useState`/`useEffect`/`useCallback`/`useMemo`、`dangerouslySetInnerHTML`、JSX 语法、函数组件、类组件
- **原生特征**：无以上框架特征，仅使用原生 DOM API、原生事件绑定
- **TypeScript 特征**：文件扩展名为 `.ts`、`.tsx`，或 `.vue` 文件中 `<script lang="ts">`；代码中出现 `interface`、`type`、`enum`、`as`、`<T>`、`extends`（泛型语境）

同一文件同时包含多个特征时，合并适用对应规则。

#### 报告口径

- 优先关注本次改动引入、放大或未收敛的问题
- 优先使用可跨项目复用的前端工程原则，不把单个项目的习惯直接当成通用阻断项
- 只有在项目约定已经形成明确契约、并且本次改动触发了该契约时，才按项目约定报告问题
- 所有问题都要说明可验证影响，不因个人偏好、代码风格偏好或 UI 审美偏好直接报问题

#### 审核执行规则

- 严重问题：发现即审核不通过，必须修复
- 中等问题：发现则审核不通过，建议修复后再合并
- 轻微问题：发现则列出，不影响审核通过结论
- `catch` 块中用于记录异常的 `console.warn` 不视为问题

#### 通用规则

以下规则适用于所有前端代码。

**严重**：

- XSS 漏洞：渲染用户输入或未转义内容（Vue：`v-html`；React：`dangerouslySetInnerHTML`；原生：`innerHTML`）
- 敏感信息暴露：API 密钥、Token、密码等硬编码在前端代码中
- 内存泄漏：定时器、事件监听器在组件卸载时未清理（Vue2：`beforeDestroy`；Vue3：`onUnmounted`/`onBeforeUnmount`；React：`useEffect` 清理函数）；组件卸载后仍尝试更新状态
- 状态管理错误：直接修改 Props（Vue 中直接修改 `props` 对象属性；React 中直接修改 `props`）；异步更新导致状态竞态；未清理的订阅
- 模板编译错误：未闭合的标签；列表渲染缺少唯一标识（Vue：`v-for` 缺少 `:key`；React：缺少 `key` 或使用数组索引作为动态列表的 `key`）
- 运行时逻辑错误：空指针引用、数组越界、状态更新顺序错误、异步竞态、死循环
- 模块完整性破坏：循环依赖导致初始化异常、公共 API 签名变更但消费方未同步、导出遗漏导致运行时找不到模块

**中等**：

- 调试代码遗留：`console.log`、`debugger` 遗留在生产代码中（`try-catch`/`catch` 块中用于记录异常的 `console.warn`/`console.error` 不视为问题）
- 可选链无兜底：使用可选链 `a?.b?.c` 访问属性但未提供兜底值（如 `?? 默认值`、`|| 默认值`），导致链路结果为 `undefined` 可能引发下游错误
- 渲染性能：缺少缓存计算导致不必要重渲染（Vue：模板中重复计算应提取为 `computed`；React：缺少 `useMemo`/`useCallback`）；大列表未虚拟化；图片未懒加载
- 组件设计缺陷：组件职责过多；Props 缺少类型校验（Vue2：缺少 `type`/`default`/`validator`；Vue3：`defineProps` 缺少类型声明；React：缺少 `propTypes` 或 TypeScript 接口）或默认值；回调未做防抖/节流
- 样式问题：`!important` 滥用；全局样式污染；z-index 层级混乱；样式隔离穿透不当（Vue：`scoped` 样式的 `/deep/`、`::v-deep`、`:deep()` 使用过宽；React：CSS Modules 命名冲突、内联样式滥用）
- 异步处理不当：Promise 未处理；loading 状态未复位；并发请求未做竞态处理；错误状态未回滚
- 响应式设计缺陷：硬编码像素宽度；缺少断点适配；容器溢出未处理
- 可访问性缺失：交互元素缺少 `aria` 属性；键盘导航不可达；表单缺少 `label`；语义化标签使用不当
- 关联变更不完整：新增组件后路由、导航、导入、样式未同步；删除组件后引用未清理
- 资源加载风险：第三方脚本无 fallback；大资源无 loading 状态；CDN 资源无错误处理
- 模块设计问题：导入未使用的模块、导出缺少类型声明、模块职责混杂、硬编码分叉替代配置或映射
- 数据校验不足：空值与异常输入未处理、边界条件未覆盖、类型转换不完整、默认值缺失
- 可维护性问题：重复代码、过度嵌套、命名无法表达语义、死代码、无效抽象
- 嵌入内容安全：iframe 缺少 sandbox 属性或 sandbox 属性过于宽松；postMessage 未校验来源 origin
- 第三方脚本完整性：CDN 外部脚本缺少 integrity 属性（SRI）；动态注入的 script 未校验来源
- Web API 权限处理：敏感 API（Geolocation、Clipboard、Notification 等）调用未处理权限拒绝或不可用场景的降级逻辑

**轻微**：

- 低风险风格问题：临时注释、格式轻微不规范、代码缩进不一致、多余空行
- 命名与表达：变量名过短或不够语义化；注释与代码不同步；导入排序不规范
- 样式轻微问题：冗余样式声明；未使用的 CSS 类；颜色值格式不统一
- 项目约定偏差但未形成行为风险：命名、目录结构、轻量约定不一致，且未破坏功能

#### 专项规则

识别到对应框架或语言特征时，读取并合并适用以下专项规则：

- **Vue2 专项规则**：见 [resources/vue2.md](./resources/vue2.md)
- **Vue3 专项规则**：见 [resources/vue3.md](./resources/vue3.md)
- **React 专项规则**：见 [resources/react.md](./resources/react.md)
- **TypeScript 专项规则**：见 [resources/typescript.md](./resources/typescript.md)
- **状态管理规则**（Pinia/Redux Toolkit/Zustand）：见 [resources/state-management.md](./resources/state-management.md)

### 步骤 4. 处理边界条件

| 场景           | 处理方式                                                             |
| -------------- | -------------------------------------------------------------------- |
| 删除文件       | 只评估删除是否影响组件引用、路由、导出、样式或配置，不审查已删除内容 |
| 重命名文件     | 按新路径和实际 diff 审查，检查导入路径是否同步更新                   |
| 大型组件       | 优先审查 diff hunk；超过 500 行时按函数或模块分段读取                |
| 仅样式改动     | 重点检查选择器冲突、响应式断点、主题变量、布局溢出                   |
| 仅模板改动     | 重点检查无障碍属性、语义化标签、事件绑定、条件渲染逻辑               |
| 仅脚本改动     | 重点检查类型安全、异步处理、状态管理、事件清理                       |
| 配置文件改动   | 重点检查构建配置、环境变量暴露、依赖版本、代理规则                   |
| 新增组件或页面 | 检查路由、导航、导入、Props 定义、样式隔离、事件注册是否同步完成     |
| 无法确认的问题 | 标记为"需人工确认"，说明原因和建议确认方式                           |

### 步骤 5. 输出审核结果

**决策分支**：

- **无问题**：输出审核通过格式
- **只有轻微问题**：输出审核通过格式，并列出轻微问题
- **存在严重或中等问题**：输出审核不通过格式，按严重程度和文件分组列出问题

输出要求：

- 问题位置必须使用 `文件路径:行号` 格式，使用相对于项目根目录的路径
- 每个问题必须包含问题类型、描述、影响和修复建议
- 问题按严重、中等、轻微顺序排列，同级别按文件路径排序
- 代码片段使用语言标签（如 `vue`、`typescript`、`css`）
- 不要直接修改代码

通过格式：

```markdown
## 审核结果：通过

### 问题统计

- 审核文件数：N
- 严重：0 个
- 中等：0 个
- 轻微：Z 个

### 轻微问题

[如无轻微问题，写"未发现轻微问题。"]
```

不通过格式：

````markdown
## 审核结果：不通过

### 问题统计

- 审核文件数：N
- 严重：X 个
- 中等：Y 个
- 轻微：Z 个

### 问题详情

#### 严重问题

1. **问题类型**：[类型]
   - **位置**：文件路径:行号
   - **描述**：[问题说明]
   - **影响**：[可能造成的后果]
   - **代码片段**：
     ```语言
     [相关代码]
     ```
   - **修复建议**：[具体可执行建议]

#### 中等问题

[同上]

#### 轻微问题

[同上，可简化代码片段]

### 修复优先级

1. 先修复严重问题。
2. 再修复中等问题。
3. 轻微问题可按团队规范决定是否处理。
````

## 安全边界

**允许执行的操作**：

- 读取代码文件内容
- 执行 git diff 命令获取变更信息
- 读取 package.json（用于识别框架类型和版本，确定适用哪些专项规则）
- 输出审核结果报告

**禁止主动执行的操作**：

- 修改代码、格式化代码或自动修复代码
- 编译命令、构建命令、部署命令
- 自动执行测试命令
- 会改变 git 状态的命令（如 commit、push、merge、rebase）
- 删除文件、重置分支、清理工作区等破坏性操作
- 网络请求命令