Menú
优化方案生成器。用于代码、架构、流程、文档等各类优化场景。 仅输出优化方案供用户选择，不直接执行改动；也不用于审核代码缺陷、定位 bug 根因或撰写新功能规格。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
创建符合国人审美的网页界面设计。当用户需要设计网页、组件、页面或应用界面时使用。 专注于简洁、精致、和谐的设计风格，生成可直接使用的前端代码。 不用于审核已有 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 条的情况
---
## 请选择方案
请告诉我您倾向哪个方案，或提出您的修改意见。