# Yy Frontend Code Refine

> 跨框架前端代码基础精炼（Vue2/Vue3/React）。对组件与 JS/TS/JSX/TSX 文件执行清理冗余代码、整理导入排序、统一代码结构、规范命名、增强 Props/Emits。 只要是前端代码文件的清理/整理/规范化意图，就应触发此技能——即使用户没有明确说"精炼"。 触发场景包括但不限于：代码精炼、清理冗余代码、整理导入排序、规范化命名、Props/Emits 增强、死代码清理、清理未使用导入/变量、 "整理一下这个文件"、"代码太乱了"、"帮我看看这个文件有什么问题"、"导入太乱了"、"这个文件能优化吗"（不含深度优化项）、 "整理代码结构"、"规范一下命名"、clean up code、organize imports、tidy up imports、refactor for readability。 不用于：新增组件、修改业务逻辑、生成提交信息、样式文件优化、CSS/BEM 规范转换。

- Skill: `bulls-cows/yy-frontend-code-refine` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add bulls-cows/yy-frontend-code-refine`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bulls-cows/yy-frontend-code-refine/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-code-refine

---


# yy-frontend-code-refine

## 描述

跨框架前端代码基础精炼（Vue2/Vue3/React）。对组件与 JS/TS/JSX/TSX 文件执行清理冗余代码、整理导入排序、统一代码结构、规范命名、增强 Props/Emits。

## 使用场景

- 用户需要清理冗余代码、清理未使用导入/变量
- 用户需要整理导入排序、整理代码结构
- 用户需要规范化命名、Props/Emits 增强
- 用户说"整理一下这个文件"、"代码太乱了"、"导入太乱了"

不应触发：

- 新增组件、修改业务逻辑
- 生成提交信息
- 样式文件优化、CSS/BEM 规范

跨框架（Vue2/Vue3/React）前端代码的**基础精炼**技能。核心边界：不生成新组件、不改业务逻辑、不生成提交信息、不优化样式文件。涉及业务行为变更的操作必须先与用户确认。

## 超出本技能范围的操作

以下操作不属基础精炼，需要用户自行处理或使用对应专项技能：

- CSS/BEM 规范 → `yy-frontend-style-bem-optimizer`
- 注释增强、async/await 转换、Hooks 抽离、组件职责梳理 → 超出本技能范围，提醒用户单独处理

## 支持的文件类型

- `.vue`（Vue2 Options API / Vue3 `<script setup>`）
- `.js` / `.jsx`（JavaScript）
- `.ts` / `.tsx`（TypeScript）

不支持的文件类型（遇到时跳过并提示用户）：

- `.css`、`.scss`、`.less`、`.styl`（样式文件 → 使用 `yy-frontend-style-bem-optimizer`）
- `.html`（纯 HTML，不含框架逻辑）

## 指令

### 步骤 1. 扫描目标文件

**决策分支**：

- **用户指定了文件或目录**：递归收集指定范围内的文件，过滤支持的文件类型（`.vue`、`.js`、`.jsx`、`.ts`、`.tsx`）
- **用户未指定**：执行 `git diff --name-only HEAD` 与 `git diff --cached --name-only`，合并去重后过滤支持的文件类型
- **非 git 仓库**：无法执行 git diff 时，提示用户指定文件或目录
- **用户粘贴了代码内容**：直接处理粘贴内容，不涉及文件扫描

无匹配文件时回复：_"当前没有需要精炼的改动文件。你可以指定文件或文件夹让我精炼。"_

### 环境信息收集（按需）

精炼任务执行前按需收集项目配置，不做全量预检测：

- **T01 导入排序**：读取 `tsconfig.json`（`compilerOptions.paths`）或 `vite.config.*` / `vue.config.*` 的 `resolve.alias`，确认路径别名前缀（如 `@/`、`@src/`、`~/`）
- **T02 Vue3 组件名**：检测 `unplugin-vue-setup-extend-plus` 是否安装（`package.json` 或 `node_modules` 目录），详见 `resources/frameworks.md` §Vue3
- **代码格式化**：所有任务执行时检测 Prettier 配置（`.prettierrc*`、`package.json#prettier` 字段）

收集失败时使用默认值并在汇总中提醒用户。

### 步骤 2. 生成任务清单

根据文件类型匹配任务：

| ID  | 子技能           | 风险等级 | 执行方式   | 适用文件                                 |
| --- | ---------------- | -------- | ---------- | ---------------------------------------- |
| T01 | 清理与导入整理   | 🟡 中    | 文件子代理 | `.vue` / `.js` / `.ts` / `.jsx` / `.tsx` |
| T02 | 代码结构排序     | 🟡 中    | 文件子代理 | `.vue` / `.js` / `.ts` / `.jsx` / `.tsx` |
| T03 | 语义化命名规范   | 🔴 高    | 主代理     | `.vue` / `.js` / `.ts` / `.jsx` / `.tsx` |
| T04 | Props/Emits 增强 | 🔴 高    | 主代理     | `.vue` / `.jsx` / `.tsx`                 |

### 风险等级与执行规则

| 风险等级 | 默认状态  | 执行规则                                       |
| -------- | --------- | ---------------------------------------------- |
| 🟡 中    | ❌ 需确认 | 用户确认后批量执行，可派发文件子代理并行处理   |
| 🔴 高    | ❌ 需确认 | 必须逐项单独确认并展示变更预览，禁止派发子代理 |

文件类型与任务匹配：

- `.vue`：T01, T02, T03, T04
- `.js` / `.ts`：T01, T02, T03
- `.jsx` / `.tsx`：T01, T02, T03, T04

展示任务清单，等待用户确认。用户可指定仅执行部分任务。

### 步骤 3. 执行中风险任务（T01/T02）

用户确认后，将中风险任务按文件分配子代理并行执行。

**执行前准备**：读取对应的详细规则文件。

- T01：读取 `resources/tasks.md` §T01
- T02：读取 `resources/tasks.md` §T02 + `resources/frameworks.md`（按文件类型读对应章节）

**子代理调度规则**：

- **分配策略**：一个文件一个子代理，子代理只持有该文件上下文，避免文件间互相干扰。
- **单文件内顺序**：同一子代理负责的文件内，必须按 T01 → T02 串行执行；不要并行两个子任务到同一文件。
- **并行度**：根据实际环境合理控制并行子代理数量，避免资源争抢。
- **失败隔离**：单个文件子代理失败时，该文件回滚（见"文件安全机制"），其他文件不受影响；汇总时单独标注失败文件与原因。
- **失败重试**：子代理失败时自动重试一次；仍失败则回滚该文件，在汇总中报告失败原因。
- **不传递改名结果**：T01/T02 完成后不要让子代理顺手做 T03/T04——高风险任务必须回到主代理。

> "先 T01 后 T02"是**单文件内的顺序约束**，不是全局阶段：不要先把所有文件 T01 跑完再回头跑 T02。每个子代理对自己那一份文件一次跑完 T01→T02 即可。

**子代理输出格式**：

每个文件子代理执行完成后，按此格式输出：

````markdown
### [文件子代理] 执行结果

**处理文件**: <filename>
**执行任务**: T0X, T0Y, ...

**执行详情**:

#### T01 清理与导入整理

- ✅ <变更项描述>
- ⏭️ <跳过项描述>

#### T02 代码结构排序

- ✅ <变更项描述>

**变更对比（关键变更）**:

```diff
- 旧代码
+ 新代码
```
````

### 步骤 4. 执行高风险任务（T03/T04）

由主代理串行执行，每项改动单独确认。

> 执行前先检测是否有确认通道。若检测不到人类确认通道，直接按"无人类在场时的降级"策略处理，不尝试执行高风险任务。

**执行前准备**：读取对应的详细规则文件。

- T03：读取 `resources/tasks.md` §T03 + `resources/naming.md`
- T04：读取 `resources/tasks.md` §T04

**执行约束**：

- 禁止派发子代理。子代理无法跨文件查影响范围。
- 每项改动单独确认。批量改名或批量修改 Props/Emits = 用户失去逐项否决权 = 高风险事故来源。
- 不要把多项打包到一条消息里问"以下 5 项是否都执行"——那等于没确认。

**确认格式**：每项改动展示文件、建议、理由、影响范围，等待用户逐项回复"确认" / "跳过" / "全部停止"。具体对话范例见 `resources/tasks.md` §T03 / §T04。

**影响范围查询优先级**：

1. **LSP `find_references`**（语义级，最准）：能区分同名变量与目标符号，优先用。
2. **ripgrep / grep**（文本级，会误伤）：LSP 不可用时退回此方案，但在汇总里要明确标注"以下是文本匹配，可能包含同名误判，请人工复核"。
3. **模板与字符串引用**：不论用哪种工具，都额外搜一遍 `.vue` 模板里的 `@click="名字"` / `v-if="名字"`、动态组件名、`this[name]` 字符串引用——这些 LSP 也未必能追到。

**代码风格与通用约束**：执行任何子技能时，遇到不确定的写法回查 `resources/style.md`。该文件包含代码风格、禁止规则、推荐实践和注释保护规则。

### 步骤 5. 输出结果汇总

按以下格式输出：

```markdown
## 精炼结果汇总

- 📁 处理文件：X 个
- ✅ 执行任务：Y 个（T01: X, T02: X, T03: X, T04: X）
- ⏭️ 跳过任务：Z 个
- ⚠️ 警告提醒：W 个
- 🗑️ 备份文件：已清理（X 个 .bak 文件已删除）

### 按文件汇总

#### FileA.vue

- ✅ T01 清理与导入整理
- ✅ T02 代码结构排序（Vue2 Options API）
- ⏭️ T03 语义化命名（无需改动）
- ✅ T04 Props/Emits 增强（Props 2 项变更，Emits 1 项变更）

### 高风险任务确认记录

| 任务                 | 文件         | 状态    | 变更项                                         |
| -------------------- | ------------ | ------- | ---------------------------------------------- |
| T03 语义化命名       | user.ts      | ✅ 完成 | `getInfo` → `apiGetUserInfo`                   |
| T04 Props/Emits 增强 | UserCard.vue | ✅ 完成 | Props: 添加 default: null；Emits: 补充类型定义 |
```

附变更后的完整代码片段（仅对关键文件）。

### 无人类在场时的降级

当此技能在批处理或上游 agent 链路中被调用、检测不到人类确认通道时：

- 中风险任务仍可执行（已批量授权）。
- 高风险任务（T03/T04）**自动跳过**，在汇总里明确标注"因无确认通道而跳过 N 项"，并把建议清单一并输出，供后续人工 review。
- 不要自我授权执行高风险任务。

## 文件安全机制

修改任何文件前确保可回滚：

- **Git 仓库**：提示用户先 `git stash` 或提交当前更改，修改失败时用 `git checkout -- <file>` 回滚。不创建额外备份文件。
- **非 Git 环境**：将原文件复制为 `{原文件名}.bak`（存放于同目录），修改失败时从 `.bak` 恢复并删除备份。修改成功后删除 `.bak`。
- **验证**：修改完成后检查语法正确性（能跑 `prettier --check` 或框架编译就跑一下）。

**异常处理**：

- 修改失败：Git 环境直接 `git checkout` 回滚；非 Git 环境从 `.bak` 恢复。在汇总中告知失败原因。
- 残留清理：仅清理本次任务产生的 `.bak` 文件，不跨任务批量清理。

## 边界条件

- 部分精炼：用户指定仅执行某子技能时，仅执行指定项，跳过其他
- 已符合规范：扫描后无需精炼的文件标注"无需精炼"
- 大型文件：超过 1000 行建议分批精炼
- 回滚保障：建议用户先提交当前状态，便于回滚

## 相关资源

按当前任务读对应文件，不要一次性全部加载：

- `resources/tasks.md`：执行 T01–T04 任一子技能前先读对应章节（§T01 / §T02 / §T03 / §T04）
- `resources/frameworks.md`：执行 T02 时，按当前文件类型读对应章节（Vue 模板 / Vue2 / Vue3 / React）
- `resources/naming.md`：执行 T03 时读，了解命名规则与跨文件引用提醒
- `resources/style.md`：遇到不确定的写法（风格、禁止项、推荐项、注释保护）时回查；不要在每次任务开始就预读