一键导入
yy-optimize
优化方案生成器。用于代码、架构、流程、文档等各类优化场景。 仅输出优化方案供用户选择,不直接执行改动;也不用于审核代码缺陷、定位 bug 根因或撰写新功能规格。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
优化方案生成器。用于代码、架构、流程、文档等各类优化场景。 仅输出优化方案供用户选择,不直接执行改动;也不用于审核代码缺陷、定位 bug 根因或撰写新功能规格。
用 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-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 条的情况
---
## 请选择方案
请告诉我您倾向哪个方案,或提出您的修改意见。