القائمة
分析前端项目文件的业务职责、数据流、交互关系和组件逻辑，生成结构化业务说明与改动记录。 当用户需要变更日志、改动记录、业务说明、代码交接文档、组件逻辑梳理或组件文档化时触发。 不用于审核代码质量、修改组件实现，也不用于后端代码或添加普通行内注释。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
创建符合国人审美的网页界面设计。当用户需要设计网页、组件、页面或应用界面时使用。 专注于简洁、精致、和谐的设计风格，生成可直接使用的前端代码。 不用于审核已有 UI 代码、优化现有组件实现，也不用于生成纯后端代码或非 Web 端 UI。
用于撰写技术文章、技术教程、经验总结类长文。 当用户明确要写技术文章、技术博客、技术教程、踩坑记录、优化案例时触发。
创建或更新 AI 全栈 Web 项目的 PRD 产品需求文档。 用于用户明确要求生成 PRD、补充 PRD 内容、或更新现有 PRD 时触发。 不用于生成普通技术文档、API 文档或仅修改代码的场景。
管理项目的分层记忆系统，包括 work-log 更新、新记忆生成、容量检查和归档。 由用户手动执行本技能后触发记忆更新，不用于普通查询或非提交场景。
在目标项目中一键启用分层记忆管理系统，生成规则、技能和记忆库结构。 仅在用户明确要求为项目添加记忆功能时使用，不用于查询记忆、更新现有记忆或初始化普通配置文件。
创建基于当前技能 `scripts/` 参考工程的 Node.js + TypeScript 脚本项目骨架，或按同一结构补齐空白/轻量脚本项目。 当用户需要快速落地命令行脚本、批处理脚本或文件处理流水线时触发，不用于后端服务、前端项目、单文件脚本片段或成熟项目重构。
| name | yy-frontend-change-log |
| description | 分析前端项目文件的业务职责、数据流、交互关系和组件逻辑，生成结构化业务说明与改动记录。 当用户需要变更日志、改动记录、业务说明、代码交接文档、组件逻辑梳理或组件文档化时触发。 不用于审核代码质量、修改组件实现，也不用于后端代码或添加普通行内注释。 |
为前端项目文件（Vue2/Vue3/React/JS/TS/样式/文档/测试）生成结构化业务说明和变更记录，将注释块追加到文件顶部并保留历史记录。支持组件级逻辑分析、数据流梳理和改动追踪。
不应触发：
仅追加注释，不修改业务逻辑、原有代码结构或 import 语句。 这一原则贯穿所有步骤，尤其是步骤 5 注入注释时——绝不能因注入注释而改变文件的运行行为。
根据文件语法特征识别项目类型，用于决定注释注入位置和业务分析策略：
.vue 文件使用 <script setup> 或 Composition API.vue 文件使用 Options APIreact 或使用 JSX/TSX 语法.js、.ts 文件，无框架特征.css、.scss、.less.md、.txt、.test.*、.spec.*无法识别时，根据扩展名推断默认处理方式。
决策分支：
用户指定文件或目录：优先使用用户指定范围，递归收集匹配类型的文件。
用户未指定范围：使用 git 命令获取变更文件，合并去重后按以下规则过滤：
git diff --name-only HEAD
git diff --cached --name-only
默认处理的文件类型：
| 类别 | 扩展名 / 文件名 |
|---|---|
| 源代码文件 | .ts、.js、.vue、.jsx、.tsx |
| 依赖与脚本声明 | package.json 等 |
| 文档文件 | .md、.txt |
| 样式文件 | .css、.scss、.less |
| 测试文件 | .test.ts、.test.js、.spec.ts、.spec.js |
默认不处理的文件（仅在用户明确授权时放行）：
| 类别 | 典型文件 |
|---|---|
| 构建与工具配置 | vite.config.ts、vue.config.js、webpack.config.js、tsconfig.json、eslint.config.js 等 |
| 环境配置 | .env、.env.test、.env.production、.env.local 等 |
| 凭证与私钥 | credentials.json、secrets.*、*.key、*.pem 等 |
异常降级：
对每个目标文件执行结构化业务分析。详细的分析工作流、基础分析项、扩展逻辑梳理项和通用规则详见 resources/analysis-workflow.md。
识别为具体框架类型后，按对应框架专属规则执行分析：
resources/vue2-rules.mdresources/vue3-rules.mdresources/react-rules.mdReference 加载时机：仅在需要执行对应分析时才读取 reference 文件——如果目标文件全部为 Vue3，则无需读取 vue2-rules.md 和 react-rules.md；如果用户仅需要变更记录而非逻辑梳理，则无需读取 output-template.md。
决策分支：
业务说明更新规则：
决策分支：
?? 或 A）：跳过 diff，直接生成完整业务说明 + 变更记录 feat(<scope>): 初始创建。生成时间戳前，先执行 date "+%Y-%m-%d %H:%M:%S" 获取当前真实本地时间。AI 不具备系统时钟感知能力，不得自行推算或猜测时间。
按文件类型生成 JSDoc 注释块并注入文件头部。详细的注释格式、注入位置、改动类型分类、Scope 推断规则和历史记录合并规则详见 resources/annotation-format.md。
合并规则：当同一小时内对同一文件执行多次时，变更记录合并到同一条，时间戳更新为最新一次执行时间，取类型优先级更高的前缀。
对每个目标文件输出：
<script> 内部顶部。示例：
✅ src/views/User/index.vue
项目类型: Vue3
注入位置: <script setup> 内部顶部
职责: 用户管理页面，支持列表展示、搜索和编辑
变更记录: 2025-01-15 14:32:07 | feat(user): 新增搜索过滤功能
当用户需求侧重逻辑梳理（而非变更记录）时，按 resources/output-template.md 的结构输出分析结果。图表仅在依赖关系或状态流转较复杂时生成（Mermaid 语法仅用于流程图、时序图和状态图），简单场景用列表即可。
禁止主动执行：
.vue 的 <template> / <style> 部分@param、// 行注释等）允许覆盖更新（仅限注释块内部）：
仅在用户明确要求时：
resources/analysis-workflow.md - 逻辑梳理工作流、基础分析项与通用规则resources/vue2-rules.md - Vue2 专属分析规则resources/vue3-rules.md - Vue3 专属分析规则resources/react-rules.md - React 专属分析规则resources/annotation-format.md - 注释格式、注入位置与历史记录合并规则resources/output-template.md - 逻辑梳理输出模板本技能可集成到 AI 编码助手中，在提交代码前自动为变更文件生成业务说明和变更记录。集成方式详见 resources/ai-integration.md。该文件仅供用户参考，不影响技能执行流程。