메뉴
Use when 用户需要优化前端性能、提升页面加载速度、减少白屏时间、优化交互流畅度、进行性能排查时。触发场景：前端性能优化、页面加载慢、白屏时间长、卡顿、LCP/FID/CLS指标优化、前端性能分析、打包体积优化。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
超压缩通信模式。通过去掉废话、冠词和客套语，在保持完整技术准确性的同时削减约 75% token 用量。 当用户说"caveman 模式"、"简洁模式"、"少废话"、"省 token"、"简短点"或调用 /caveman 时触发。
对用户的计划或设计进行不留情面的深度追问，直到达成共同理解，逐一解决决策树的每个分支。当用户想要压力测试计划、检验设计时触发。触发词：追问我、grill me、逐一问我、挑战我的方案、深度追问、质疑设计、设计评审追问。
将当前对话压缩为交接文档，供下一个 Agent 会话接续工作。触发词：交接、handoff、下一个会话、会话摘要、接续工作、传给下一个 agent。
在代码库中发现架构"深化"机会——将浅模块变成深模块的重构，提升可测试性和 AI 可导航性。与 architecture-advisor 互补：architecture-advisor 设计新架构，本技能改善现有代码库结构。触发词：改进代码库架构、架构深化、找重构机会、模块耦合太紧、难以测试、代码难以理解、架构改进、improve architecture、refactor opportunities。
快速验证设计的一次性原型。区分两条分支——逻辑/状态模型用终端交互 App，UI 布局用多变体路由切换。当用户想原型验证、检验数据模型或状态机、探索多种 UI 方案时触发。触发词：原型、prototype、验证方案、快速试验、让我玩一玩、试几个设计。
Use when 已有书面实施计划、任务相对独立，且在本会话内通过子代理逐任务落实时。触发场景：执行实施计划、子代理开发、按计划实现、Task 派发实现、两阶段代码审查、plan execution。
| name | frontend-performance-optimization |
| description | Use when 用户需要优化前端性能、提升页面加载速度、减少白屏时间、优化交互流畅度、进行性能排查时。触发场景：前端性能优化、页面加载慢、白屏时间长、卡顿、LCP/FID/CLS指标优化、前端性能分析、打包体积优化。 |
铁律：先量化分析性能瓶颈，再给出针对性优化方案，禁止无依据的盲目优化。所有优化建议必须标注收益和成本，让用户可以按需选择。
启动时识别用户场景：
你的需求是：
1. 性能问题排查 — 页面加载慢/卡顿，需要定位瓶颈
2. 性能指标优化 — 提升LCP/FID/CLS等核心Web Vital指标
3. 打包体积优化 — 减少构建产物大小，提升加载速度
4. 全项目性能优化 — 对整个前端项目进行系统性性能优化
优先要求用户提供性能数据，或指导用户采集数据：
需要你提供以下信息以便精准定位问题：
1. 页面性能报告（Lighthouse报告、Chrome Performance面板截图）
2. 核心Web Vital指标数据（LCP、FID、CLS、FCP、TTI）
3. 打包产物分析报告（webpack-bundle-analyzer、rollup-visualizer输出）
4. 网络请求情况（瀑布图、接口响应时间、资源大小）
如果没有数据，先指导用户采集：
根据数据分析，按优先级定位瓶颈：
### 📊 性能瓶颈诊断
- 核心问题：[主要性能瓶颈点]
- 影响指标：[受影响的性能指标]
- 当前表现：[当前指标数值，目标数值]
### 🚀 优化方案（按优先级排序）
#### 高收益低成本（优先实施）
- [优化项]：[具体做法]
- 预期收益：[指标提升幅度，如LCP从3.2s降到1.5s]
- 实施成本：[低/中/高，改动范围描述]
#### 中收益中成本（次优先实施）
- [优化项]：[具体做法]
- 预期收益：[指标提升幅度]
- 实施成本：[低/中/高，改动范围描述]
#### 低收益高成本（可选实施）
- [优化项]：[具体做法]
- 预期收益：[指标提升幅度]
- 实施成本：[低/中/高，改动范围描述]
### ✅ 验证方法
- 优化后使用[工具名称]重新检测，对比指标变化
- 核心指标达标要求：LCP < 2.5s，FID < 100ms，CLS < 0.1
references/web-vitals-optimization-guide.md — Web Vital指标优化指南references/bundle-optimization-checklist.md — 打包体积优化检查清单references/runtime-performance-best-practices.md — 运行时性能最佳实践references/lighthouse-performance-guide.md — Lighthouse性能优化指南