yy-frontend-code-refine

name

yy-frontend-code-refine

description

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

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 即可。

子代理输出格式：

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

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

**处理文件**: <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. 输出结果汇总

按以下格式输出：

## 精炼结果汇总

- 📁 处理文件：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：遇到不确定的写法（风格、禁止项、推荐项、注释保护）时回查；不要在每次任务开始就预读