yy-frontend-change-log

yy-frontend-change-log

Description

Generate structured business descriptions and change records for front-end project files (Vue2/Vue3/React/JS/TS/styles/docs/tests), append comment blocks to the top of files, and preserve historical records. Supports component-level logic analysis, data flow breakdown, and change tracking.

Use Cases

• The user needs a changelog, change record, or business description
• The user needs a code handover document or component documentation
• The user needs a component logic breakdown or page logic organization
• File descriptions need to be organized before committing code or before code review
• A newcomer needs to understand the front-end file business logic when taking over a project

Should not be triggered:

• Reviewing front-end code quality or modifying component implementations
• Generating descriptions for back-end code
• Adding ordinary inline comments to pure functions

Core Principles

Only append comments; do not modify business logic, the original code structure, or import statements. This principle runs through all steps, especially step 5 when injecting comments—the runtime behavior of the file must never be changed by injecting comments.

Instructions

Step 1. Identify the file type

Identify the project type based on the file's syntax characteristics, to determine the comment injection location and business analysis strategy:

• Vue3：.vue files use <script setup> or the Composition API
• Vue2：.vue files use the Options API
• React: import react or use JSX/TSX syntax
• Pure JS/TS script：.js、.ts files, with no framework characteristics
• Style files：.css、.scss、.less
• Documentation/test files：.md、.txt、.test.*、.spec.*

When unable to identify, infer the default handling method based on the extension.

Step 2. Obtain the analysis target

Decision branches：

• The user specifies files or directories: Prioritize the user-specified scope, and recursively collect files of matching types.

• The user does not specify a scope: Use git commands to obtain changed files, merge and deduplicate, then filter according to the following rules:

  git diff --name-only HEAD
  git diff --cached --name-only
  

File types handled by default：

Category	Extension / File name
Source code files	.ts、.js、.vue、.jsx、.tsx
Dependency and script declarations	package.json etc.
Documentation files	.md、.txt
Style files	.css、.scss、.less
Test files	.test.ts、.test.js、.spec.ts、.spec.js

Files not handled by default (only allowed when the user explicitly authorizes it)：

Category	Typical files
Build and tool configuration	vite.config.ts、vue.config.js、webpack.config.js、tsconfig.json、eslint.config.js etc.
Environment configuration	.env、.env.test、.env.production、.env.local etc.
Credentials and private keys	credentials.json、secrets.*、*.key、*.pem etc.

Exception fallback：

• The project has no git: Prompt the user to manually specify the file scope, or use all matching files in the current directory.
• git diff fails: Skip diff analysis and generate the business description based only on the current file content.
• The file is empty or contains only template code: marked as "initial file", generate a brief description.
• No matching files: reply "There are currently no changed files to analyze." and terminate.

Step 3. Analyze file business structure

Perform structured business analysis on each target file. For the detailed analysis workflow, basic analysis items, extended logic review items, and general rules, see resources/analysis-workflow.md。

After identifying a specific framework type, execute the analysis according to the corresponding framework-specific rules:

• Vue2-specific rules: see resources/vue2-rules.md
• Vue3-specific rules: see resources/vue3-rules.md
• React-specific rules: see resources/react-rules.md

Reference loading timing: read reference files only when the corresponding analysis needs to be performed — if all target files are Vue3, there is no need to read vue2-rules.md and react-rules.md; if the user only needs change records rather than logic review, there is no need to read output-template.md。

Decision branches：

• Component exceeds 200 lines: in the comment block, keep only the core responsibilities and data flow for the business description (one-line summary), and put the detailed logic into the logic review output.
• User needs focus on change records: condense the business description to a 1-2 sentence summary.
• User needs focus on logic review: expand according to the complete analysis items.

Business description update rules：

• On each execution,re-analyze and update the business description section, so that it always reflects the current state of the code.
• The change record section is unaffected; only append, do not modify.

Step 4. Extract change summary

Decision branches：

• Existing file (has diff records): execute git diff and extract the change summary.
• New file (git status is ?? or A）: skip diff and directly generate the complete business description + change record feat(<scope>): 初始创建。

Step 5. Generate comment block and inject

Before generating the timestamp, first execute date "+%Y-%m-%d %H:%M:%S" to obtain the current real local time. AI does not have the ability to perceive the system clock and must not calculate or guess the time on its own.

Generate a JSDoc comment block according to the file type and inject it at the top of the file. For the detailed comment format, injection position, change type classification, Scope inference rules, and history merge rules, see resources/annotation-format.md。

Merge rules: when the same file is processed multiple times within the same hour, merge the change records into the same entry, update the timestamp to the latest execution time, and use the prefix with the higher type priority.

Step 6. Output results

For each target file, output:

• File path: relative path.
• Project type: Vue3 / Vue2 / React / JS / TS / styles / documentation.
• Injection position: top of file / <script> inner top.
• Business summary: responsibilities (1 sentence).
• Change record: the timestamp and change summary appended this time.

Example:

✅ src/views/User/index.vue
   项目类型: Vue3
   注入位置: <script setup> 内部顶部
   职责: 用户管理页面，支持列表展示、搜索和编辑
   变更记录: 2025-01-15 14:32:07 | feat(user): 新增搜索过滤功能

When the user needs focus on logic review (rather than change records), follow resources/output-template.md Output the analysis results in the structure of. Generate charts only when dependencies or state transitions are relatively complex (Mermaid syntax is used only for flowcharts, sequence diagrams, and state diagrams); for simple scenarios, a list is sufficient.

Security boundaries

Prohibit proactive execution：

• Execute git commit / git push
• Modify the .vue of <template> / <style> section
• Overwrite or replace existing change records (only appending is allowed)
• Modify existing non-format comment content at the top of the file (such as @param、// line comments, etc.)

Overwrite updates allowed(limited to inside the comment block):

• Business description section: re-analyze and overwrite on each execution to ensure it reflects the current state of the code
• Format alignment of existing JSDoc comment blocks (without changing semantics)

Only when the user explicitly requests it：

• Correct the parts of the analysis results that are inaccurate
• Adjust the comment format or content

Related resources

• resources/analysis-workflow.md - Logic sorting workflow, basic analysis items, and general rules
• resources/vue2-rules.md - Vue2-specific analysis rules
• resources/vue3-rules.md - Vue3-specific analysis rules
• resources/react-rules.md - React-specific analysis rules
• resources/annotation-format.md - Comment format, injection location, and history merge rules
• resources/output-template.md - Logic sorting output template

User reference (non-executable instructions)

This skill can be integrated into AI coding assistants to automatically generate business descriptions and change records for changed files before code submission. For integration details, see resources/ai-integration.md. This file is for user reference only and does not affect the skill execution process.