Menu
优化方案生成器。用于代码、架构、流程、文档等各类优化场景。 仅输出优化方案供用户选择，不直接执行改动；也不用于审核代码缺陷、定位 bug 根因或撰写新功能规格。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
创建符合国人审美的网页界面设计。当用户需要设计网页、组件、页面或应用界面时使用。 专注于简洁、精致、和谐的设计风格，生成可直接使用的前端代码。 不用于审核已有 UI 代码、优化现有组件实现，也不用于生成纯后端代码或非 Web 端 UI。
用于撰写技术文章、技术教程、经验总结类长文。 当用户明确要写技术文章、技术博客、技术教程、踩坑记录、优化案例时触发。
创建或更新 AI 全栈 Web 项目的 PRD 产品需求文档。 用于用户明确要求生成 PRD、补充 PRD 内容、或更新现有 PRD 时触发。 不用于生成普通技术文档、API 文档或仅修改代码的场景。
管理项目的分层记忆系统，包括 work-log 更新、新记忆生成、容量检查和归档。 由用户手动执行本技能后触发记忆更新，不用于普通查询或非提交场景。
在目标项目中一键启用分层记忆管理系统，生成规则、技能和记忆库结构。 仅在用户明确要求为项目添加记忆功能时使用，不用于查询记忆、更新现有记忆或初始化普通配置文件。
创建基于当前技能 `scripts/` 参考工程的 Node.js + TypeScript 脚本项目骨架，或按同一结构补齐空白/轻量脚本项目。 当用户需要快速落地命令行脚本、批处理脚本或文件处理流水线时触发，不用于后端服务、前端项目、单文件脚本片段或成熟项目重构。
| name | yy-optimize |
| description | 优化方案生成器。用于代码、架构、流程、文档等各类优化场景。 仅输出优化方案供用户选择，不直接执行改动；也不用于审核代码缺陷、定位 bug 根因或撰写新功能规格。 |
优化方案生成器，帮助用户在多种可行方案中做出最佳选择。
核心原则：务实优先，不为优化而优化。如果现状已经足够好，应直接告知用户无需优化。
不应触发：
读取优化对象及其关联文件，识别问题与机会：
对步骤 2 的每个发现进行分级筛选：
决策分支：
根据实际可行的方案数量输出：
每个方案包含：
以结构化格式输出方案，等待用户反馈。
## 优化分析
**优化目标**：[一句话描述]
**现状评估**：当前实现已经足够好，无明显优化空间。
**结论**：无需优化。
## 优化分析
**优化目标**：[一句话描述]
**现状问题**：[列出主要问题]
---
## 方案一：[方案名称]（推荐）
**核心思路**：[一句话描述]
**实施步骤**：
1. [步骤一]
2. [步骤二]
3. [步骤三]
**预期效果**：
- [效果一]
- [效果二]
**潜在风险**：
- [风险一]
**适用场景**：[描述适合什么情况下选择此方案]
---
## 方案二：[方案名称]
[同上结构]
---
## 方案三：[方案名称]
[同上结构]
---
## 请选择方案
请告诉我您倾向哪个方案，或提出您的修改意见。
优化这个组件的渲染性能
## 优化分析
**优化目标**：提升组件渲染性能
**现状问题**：
- 每次父组件更新都会触发重新渲染
- 列表项未使用 key 优化
- 存在不必要的计算属性
---
## 方案一：memo + useMemo 优化（推荐）
**核心思路**：使用 React.memo 和 useMemo 减少不必要的重渲染
**实施步骤**：
1. 使用 React.memo 包裹组件
2. 用 useMemo 缓存计算结果
3. 优化列表项 key
**预期效果**：
- 渲染次数减少 50%+
- CPU 占用降低
**潜在风险**：
- memo 对比本身有开销
- 需要测试边界情况
**适用场景**：组件渲染开销大、父组件频繁更新的情况
---
## 方案二：状态下沉
**核心思路**：将状态移到实际使用的子组件中
**实施步骤**：
1. 识别状态使用位置
2. 将状态下移到子组件
3. 减少父组件状态数量
**预期效果**：
- 缩小重渲染范围
- 代码更清晰
**潜在风险**：
- 可能需要调整组件结构
- 状态管理分散
**适用场景**：状态只在部分子组件中使用的情况
---
## 方案三：虚拟列表
**核心思路**：对长列表使用虚拟滚动
**实施步骤**：
1. 引入虚拟列表库
2. 改造列表渲染逻辑
3. 配置可视区域参数
**预期效果**：
- 大列表渲染性能显著提升
- 内存占用降低
**潜在风险**：
- 增加依赖
- 需要处理滚动行为差异
**适用场景**：列表项超过 100 条的情况
---
## 请选择方案
请告诉我您倾向哪个方案，或提出您的修改意见。