yy-frontend-vue2-code-optimization

When to Use

• When the user does not specify files, optimize current git changed files (including staging area)
• When the user explicitly specifies files or folders, optimize the .vue, .js, .css, .scss, .less files within them
• Need to optimize code structure during Code Review
• Users explicitly request frontend code optimization (Vue2 components, JS or CSS)

When Not to Use

• Generate new components or new feature code
• Modify business logic
• Generate git commit messages
• Non-Vue2 projects (use yy-frontend-vue3-code-optimization for Vue3)

Supported File Types

.vue

.js

.css

.scss

.less

Optimization Workflow

Step 1: Determine Optimization Targets

1. If the user specifies files/folders: Recursively collect all supported file types
2. If not specified: Execute

   git diff --name-only HEAD

   and

   git diff --cached --name-only

   , merge and deduplicate, then filter out supported file types
3. If no matching files are found, reply with "There are currently no changed files that need optimization (supports .vue, .js, .css, .scss, .less). You can specify files or folders for me to optimize." and terminate

Step 2: Read Detailed Specifications

• Need rules for Vue2 component structure, props, computed, methods, emit, template attribute order, etc. → Read

  references/component.md

• Need rules for code style, import order (9 groups), quotes/semicolons/indentation/line width/trailing commas, etc. → Read

  references/code-style.md

• Need comment specifications (JSDoc, template comments, script comments, key comment scenarios) → Read

  references/comments.md

• Need naming conventions (API functions, event functions, boolean naming, module splitting suggestions) → Read

  references/naming.md

• Need CSS/BEM naming and style formatting rules → Read

  references/css-style.md

Step 3: Optimize File by File

.vue

Files

1. Template Section: Adjust attribute order, clean up complex expressions, add block comments
2. Script Section: Arrange properties in standard order, standardize props/data/computed/watch/methods, add JSDoc comments, unify network request writing
3. Style Section: Apply BEM naming, ensure scoped, add module comments

.js

Files

1. Reorder imports according to 9-group rules
2. Standardize naming and code style
3. Add JSDoc comments for key methods

.css

/

.scss

/

.less

Files

1. Apply BEM naming specifications
2. Unify code formatting
3. Add module comments

Step 4: Output Results

## Optimization Results

### Number of Optimized Files: N

#### [filename]

**Optimization Content**:
1. [Optimization item description]
2. [Optimization item description]

[Full optimized code]

Output Contract

• Parse the template, script, and style blocks of components, and directly output the full optimized code after applying specifications
• Do not modify business logic, keep original functions unchanged
• Ensure correct Vue 2 syntax (such as

  v-model

  , lifecycle, etc.)
• Tone is professional, objective, and concise

Reference Documents

Progressive Disclosure: The following files are read on demand, opened according to file types and optimization needs.

• references/component.md

  — Vue2 component structure order, Props specifications, computed rules, method sorting, network request patterns, Emit specifications, template attribute order

• references/code-style.md

  — Indentation/quotes/semicolons/line width/trailing commas, 9-group import order, Prettier configuration,

  ==

  rules

• references/comments.md

  — JSDoc format, template/script comment formats, key comment scenarios

• references/naming.md

  — API/event/constant/component/Props naming, boolean prefixes, module splitting suggestions

• references/css-style.md

  — BEM naming definition, code formatting, style comment formats, scope labeling