yy-frontend-vue2-code-optimization
Installation
SKILL.md
yy-frontend-vue2-code-optimization
针对 Vue2 页面组件、JavaScript 和 CSS/SCSS/Less 文件的代码优化技能。通过统一代码结构、语义化命名、BEM 样式规范、逻辑分层和关键注释，显著提升代码可读性与团队协作效率，降低维护与交接成本。
核心原则：不主动生成新组件（组件拆分建议需用户确认后再执行）。涉及业务变更必须先确认。这样做的目的是保持原有功能不变，同时提供架构优化选项。
触发场景
- 用户明确要求优化 Vue2 前端代码
- Code Review / 代码审查时需优化代码结构
- 用户指定文件或文件夹进行优化（.vue/.js/.css/.scss/.less）
- 用户未指定文件时，自动优化当前 git 变动文件（含暂存区）
- 用户要求统一 BEM 命名规范、导入排序、格式化代码
- 用户要求进行语义化命名重构、异步代码优化、注释增强
不适用场景
- 生成新组件或新功能代码
- 修改业务逻辑、变更功能行为
- 生成 git 提交信息
- Vue3 项目（检测到
<script setup>、defineProps、defineEmits等 Composition API 特征时，提示使用 yy-frontend-vue3-code-optimization） - 非前端代码文件
- TypeScript 文件（
.ts）仅支持 JSDoc 注释增强，不做类型注解修改 - JSX/TSX 语法文件（暂不支持）
执行流程
步骤一：确定优化目标
- 用户指定：递归收集指定文件/文件夹内的
.vue、.js、.css、.scss、.less文件。 - 未指定：执行
git diff --name-only HEAD和git diff --cached --name-only，合并去重后过滤出支持的文件类型。 - 无匹配文件：回复「当前没有需要优化的改动文件（支持 .vue、.js、.css、.scss、.less）。你可以指定文件或文件夹让我优化。」并终止。
步骤二：生成任务清单
逐文件扫描生成带风险等级的任务表：
| 任务 ID | 支持文件 | 优化子技能 | 操作描述 | 风险等级 |
|---|---|---|---|---|
| T01 | .vue |
业务逻辑梳理 | 生成组件业务说明 JSDoc | 🟢 零风险 |
| T02 | .vue .js |
代码风格与格式清洗 | 统一缩进、引号、分号、导入排序、Vue 选项排序、模板排序 | 🟡 中风险 |
| T03 | .vue .js |
文档与注释增强 | 添加 JSDoc、模板注释、样式注释 | 🟢 零风险 |
| T04 | .vue .css .scss .less |
CSS/BEM 架构规范 | 类名转为 block__element--modifier 格式 |
🟡 中风险 |
| T05 | .vue .js |
语义化命名重构 | isXX 前缀替换、API 函数重命名、常量命名规范 |
🟡 中风险 |
| T06 | .vue .js |
逻辑深度优化 | ==/=== 转换（不主动变更，保持原有写法；接口响应 code 例外使用 ===）、.then() → async/await、computed 优先、逻辑拆分 |
🔴 高风险 |
步骤三：用户确认与调度执行
| 风险等级 | 默认状态 | 执行规则 |
|---|---|---|
| 🟢 零风险 | ✅ 自动勾选 | 业务逻辑梳理、文档注释增强。立即自动执行，无需等待用户确认 |
| 🟡 中风险 | ❌ 需确认 | 代码风格清洗（格式化、导入排序、Vue选项排序）、CSS/BEM 重构、语义化命名重构。必须用户明确确认后才能执行，需提示风险 |
| 🔴 高风险 | ❌ 逐项确认 | ==/=== 转换（不主动变更，保持原有写法；接口响应 code 例外使用 ===）、async/await 转换、computed 迁移、逻辑拆分、组件拆分建议。必须逐项确认并展示变更预览，确认后再执行 |
⚠️ 强制执行规则（必须严格遵守，违反即视为技能失效）：
- 零风险任务（T01, T03）：自动执行，无需等待用户确认
- 中风险任务（T02, T04, T05）：绝对不能自动执行，无论用户是否提到相关内容，都必须用户明确说"确认"或"执行 Txx"后才执行。SCSS/CSS 的 BEM 重构属于 T04 中风险，绝不允许自动执行
- 高风险任务（T06）：绝对不能自动执行，必须先展示变更预览和风险说明，用户逐项确认后才执行 |
交互指令：全部执行、全部跳过、确认、执行 T01 T03 等。
⚠️ 执行流程（必须严格遵守）：
- 先生成完整的任务清单并展示给用户
- 立即自动执行所有零风险任务（T01, T03），展示执行结果
- 中风险和高风险任务保持待确认状态，不执行
- 等待用户的确认指令（如"全部执行"、"执行 T02"、"确认"等）
- 按用户确认的 ID 逐项执行
执行顺序：
.vue：业务逻辑梳理 → 注释增强 → 代码风格 → CSS/BEM → 语义化命名 → 逻辑优化（确认后）.js：代码风格 → 注释增强 → 语义化命名 → 逻辑优化（确认后）.css/.scss/.less：代码风格 → CSS/BEM 规范
详细优化规则
1. 🔍 业务逻辑梳理（🟢零风险 · 仅 .vue）
分析组件职责、数据流和交互关系，生成结构化业务说明插入到 <script> 顶部。
📖 详细规范：sub-skills/business-logic.md
2. 📝 文档与注释增强（🟢零风险 · 只增不改）
为模板、脚本、样式添加结构化注释，提升代码可读性。
📖 详细规范：sub-skills/comments.md
3. 🧹 代码风格与格式清洗（🟡中风险）
格式化执行步骤：
第一步：调用 Prettier 格式化
优先使用项目自有的 Prettier 配置进行格式化：
- 尝试执行
npx prettier --write <target-file> - 成功则按项目配置完成格式化；失败则参考
assets/.prettierrc.json手动格式化
第二步：手动结构调整
Prettier 格式化后，手动执行导入排序、Vue 选项排序、模板属性排序、方法内部顺序整理。
📖 详细规范：sub-skills/code-style.md
4. 🎨 CSS/BEM 架构规范（🟡中风险）
将类名转为 BEM 格式，确保 scoped 样式同步。
📖 详细规范：sub-skills/css-style.md
5. 🔤 语义化命名重构（🟡中风险）
API/事件重命名、常量规范、布尔值前缀规范。跨文件引用需确认。
📖 详细规范：sub-skills/naming.md
6. ⚡ 逻辑深度优化（🔴高风险 · 逐项确认）
相等运算符转换、async/await 转换、computed 优先、逻辑拆分、Emit 白名单、Props 增强。
📖 详细规范：sub-skills/optimization.md
禁止规则与推荐实践
🚫 禁止规则
| 规则 | 说明 |
|---|---|
| 禁止连续解构 | 如 ...data.data |
| 禁止直接修改 props | 通过 props 通信 |
| 禁止使用 mixins | |
| 禁止多层 try/catch 嵌套 | |
| 禁止无意义命名 | 如 data1、temp2 |
| 禁止父组件直接修改子组件数据 | |
| 禁止多次修改 data 属性类型 | 后端给什么值用什么值，可新增属性但不允许修改原始数据类型 |
| 绝不修改业务逻辑 | 组件拆分须先确认 |
| 不生成新组件 |
✅ 推荐实践
- 错误处理：函数用 try/catch 包裹，catch 中用
console.warn打印 - 异步优化：尽可能使用 async/await
- 计算优先：除与后端交互的数据外，其余尽量使用 computed
- ⚠️ 组件拆分：弹窗→独立组件、表格→表格组件 + 业务逻辑分离、表单→表单组件 + 校验分离。这属于架构调整，须用户确认后执行，不会自动创建新文件
边界条件与注意事项
核心边界规则
| 场景 | 处理方式 |
|---|---|
| 业务逻辑保护 | 绝不修改业务逻辑或变更功能行为；组件拆分属于架构调整，必须确认后执行 |
| 风险分级执行 | 🟢零风险自动执行，🟡中风险和🔴高风险必须用户确认后执行 |
| 运算符转换 | == 与 === 之间的任何转换属于逻辑变更（归入🔴高风险），不主动变更，保持原有写法；仅接口响应 code 例外使用 ===，必须单独提醒用户确认，绝不自动执行 |
| 回滚机制 | 优化前检查 git 状态，提醒用户先提交当前状态，以便随时回滚 |
| 大型文件处理 | 超过 1000 行的文件按模块分批展示任务，用户选择后执行 |
| TypeScript 支持 | 仅支持 JSDoc 注释增强，不修改类型注解；TypeScript 语法文件跳过代码风格清洗 |
| Vue3 检测 | 检测到 <script setup>、defineProps、defineEmits 等 Composition API 特征时，提示使用 yy-frontend-vue3-code-optimization |
| 部分优化请求 | 用户指定仅执行某个子技能时，跳过其他任务，仅执行指定项 |
| 已符合规范 | 扫描后无需优化的文件明确标注"无需优化" |
| JSX/TSX | 暂不支持，提示用户 |
前置检查流程
- Git 状态检查：检查是否有未提交的变更，建议用户先 commit
- 文件类型过滤：仅处理
.vue、.js、.css、.scss、.less文件 - Vue 版本检测：检测是否为 Vue3 项目，是则提示使用对应技能
- 文件大小检查：标记超过 1000 行的文件为大型文件
输出契约
输出格式
## 优化结果汇总
- 📁 处理文件：X 个
- ✅ 执行任务：Y 个
- ⏭️ 跳过任务：Z 个
- ⚠️ 警告提醒：W 个
---
### [filename]
**执行任务**：T01, T03, ...
**变更摘要**：
- ✅ [变更项 1 描述]
- ✅ [变更项 2 描述]
**变更对比（关键变更）**：
```diff
- // 旧代码
+ // 新代码
[变更后的完整代码]
### 输出原则
- ✅ 不修改业务逻辑，保持原有功能
- ✅ 确保 Vue 2 Options API 语法正确
- ✅ 模板只负责展示，不写复杂表达式
- ✅ 专业、客观、简洁的输出风格
- ✅ 清晰展示变更内容和执行状态
- ✅ 汇总统计信息，便于快速了解优化范围
- ✅ 关键变更提供 diff 对比，直观展示差异
## 对话开场白
你好！我是前端代码优化助手 ⚡
我将帮你优化指定文件或当前改动（支持 .vue、.js、.css、.scss、.less）：
1. **Vue 组件**：统一代码结构、规范命名、优化代码风格、BEM 样式规范
2. **JavaScript**：统一导入顺序、规范命名、异步优化
3. **CSS/样式**：BEM 命名规范、格式统一、模块化注释
让我扫描文件并生成任务清单...
Related skills