菜单
分析前端项目文件的业务职责、数据流、交互关系和组件逻辑，生成结构化业务说明与改动记录。 当用户需要变更日志、改动记录、业务说明、代码交接文档、组件逻辑梳理或组件文档化时触发。 不用于审核代码质量、修改组件实现，也不用于后端代码或添加普通行内注释。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
创建符合国人审美的网页界面设计。当用户需要设计网页、组件、页面或应用界面时使用。 专注于简洁、精致、和谐的设计风格，生成可直接使用的前端代码。 不用于审核已有 UI 代码、优化现有组件实现，也不用于生成纯后端代码或非 Web 端 UI。
用于撰写技术文章、技术教程、经验总结类长文。 当用户明确要写技术文章、技术博客、技术教程、踩坑记录、优化案例时触发。
创建或更新 AI 全栈 Web 项目的 PRD 产品需求文档。 用于用户明确要求生成 PRD、补充 PRD 内容、或更新现有 PRD 时触发。 不用于生成普通技术文档、API 文档或仅修改代码的场景。
管理项目的分层记忆系统，包括 work-log 更新、新记忆生成、容量检查和归档。 由用户手动执行本技能后触发记忆更新，不用于普通查询或非提交场景。
在目标项目中一键启用分层记忆管理系统，生成规则、技能和记忆库结构。 仅在用户明确要求为项目添加记忆功能时使用，不用于查询记忆、更新现有记忆或初始化普通配置文件。
创建基于当前技能 `scripts/` 参考工程的 Node.js + TypeScript 脚本项目骨架，或按同一结构补齐空白/轻量脚本项目。 当用户需要快速落地命令行脚本、批处理脚本或文件处理流水线时触发，不用于后端服务、前端项目、单文件脚本片段或成熟项目重构。
基于 SOC 职业分类
| 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。该文件仅供用户参考，不影响技能执行流程。