用途
该技能聚焦于 Web UI 性能的诊断与修复，目标是打造更快、更流畅的用户体验。当用户提到页面慢、卡顿、掉帧（slow、laggy、janky 等）时使用。覆盖的维度包括加载速度、渲染、动画、图片和打包体积。
前置准备
用户通过 /optimize 启动该工作流。技能激活后需要加载 $frontend-design，其中包含设计原则、反模式以及 Context Gathering Protocol，需先遵循该协议；若尚不存在设计上下文，必须先加载 $setup。此外还需收集：目标设备、性能约束条件，以及哪些用户交互感觉缓慢。
主要能力
性能问题评估
测量现状，包括 Core Web Vitals（LCP、FID/INP、CLS）、加载时间（可交互时间、首次内容绘制）、交互延迟（筛选、搜索、保存、打开面板、自动补全等重复操作的响应时间）、打包体积（JS、CSS、图片）、运行时性能（帧率、内存、CPU）以及网络状况（请求数、负载大小、瀑布流）。定位瓶颈：什么慢、为什么慢、有多严重、影响哪些用户。强调先测量再优化，避免过早优化。
交互速度
依据 Doherty Threshold，常规交互应让用户立即看到确认反馈，并尽可能在约 400ms 内完成。超时时应立即反馈、流式或逐步呈现内容、预取可能的下一步数据，优先使用骨架屏、乐观 UI 与渐进式渲染，而不是空白等待和通用 spinner。
加载性能
图片：使用 WebP、AVIF 等现代格式、合理尺寸、懒加载、响应式图片（srcset、picture）、压缩（80-85% 质量通常无感知）、CDN 加速。AVIF 同等画质通常比 WebP 小 30-50%，WebP 兼容性更广，两者结合并保留回退；小图标或简单图形不建议用 AVIF；需在低端设备测试 AVIF 解码速度。
JavaScript：代码分割（按路由、按组件）、tree shaking、移除未使用依赖、懒加载非关键代码、动态 import 大组件。
CSS：移除未使用 CSS、关键 CSS 内联其余异步加载、减少文件数、使用 CSS containment。
字体：font-display: swap 或 optional、字体子集化、预加载关键字体、必要时使用系统字体、限制字重数量。字体子集化可通过静态子集（按语言/脚本拆分并用 unicode-range 提供）、动态子集或关键字形子集实现；工具包括 pyftsubset（fonttools）、subfont、glyphhanger。
关键 CSS 提取：把首屏所需 CSS 内联到 head，其余异步加载；可用 critical（npm）或 Penthouse 自动提取，或手动识别。注意：内联 CSS 不应超过约 14KB（gzip 后）；关键 CSS 需与实际首屏同步更新；SPA 可考虑按路由提取。
加载策略：关键资源优先（非关键用 async/defer）、预加载关键资源、预取可能访问的页面、Service Worker 缓存、HTTP/2 或 HTTP/3。容器查询可让组件根据自身容器尺寸响应，减少页面级断点，运行成本低，建议优先用 container-type: inline-size。
渲染性能
避免布局抖动，批量读取再批量写入。优化渲染：使用 CSS contain、减小 DOM 深度与体积、长列表使用 content-visibility: auto 或虚拟滚动（架构开放时优先 TanStack Virtual，已有虚拟化方案则保留）。文本密集、可变高度列表可考虑预测式文本测量而非反复读取 DOM。
减少绘制与合成：动画使用 transform 和 opacity（GPU 加速），避免动画化布局属性；谨慎使用 will-change；缩小绘制区域。
动画性能
使用 GPU 加速属性，目标 60fps（每帧 16ms），JS 动画用 requestAnimationFrame，节流/防抖滚动处理，优先 CSS 动画，避免动画期间长时间运行 JS。可用 Intersection Observer 高效检测元素进入视口。
框架优化
React 可使用 memo()、useMemo()、useCallback()、虚拟化长列表、路由代码分割、避免渲染中创建内联函数、使用 React DevTools Profiler。框架无关做法包括减少重渲染、防抖昂贵操作、记忆化计算值、懒加载路由与组件。
网络优化
减少请求（合并小文件、SVG 雪碧图、内联小关键资源、移除未使用的第三方脚本）；优化 API（分页、GraphQL 按需字段、gzip/brotli 压缩、HTTP 缓存头、CDN）；针对慢连接做自适应加载（navigator.connection）、乐观 UI、请求优先级、渐进增强。
Core Web Vitals 优化
LCP < 2.5s：优化主图、内联关键 CSS、预加载关键资源、使用 CDN、服务端渲染。 FID < 100ms / INP < 200ms：拆分长任务、延后非关键 JS、用 Web Worker 处理重计算、减少 JS 执行时间。 CLS < 0.1：为图片和视频设置尺寸、不在已有内容上方注入内容、使用 aspect-ratio、为广告/嵌入预留空间、避免引起布局偏移的动画。
性能监控
工具：Chrome DevTools（Lighthouse、Performance 面板）、WebPageTest、Core Web Vitals（Chrome UX Report）、打包分析器（webpack-bundle-analyzer）、监控服务（Sentry、DataDog、New Relic）。指标：LCP、FID/INP、CLS、TTI、FCP、TBT、打包体积、请求数。强调在真实设备和真实网络条件下测量。
适用场景与限制
适用于前端性能优化工作，涵盖加载、渲染、动画、图片、打包与网络等环节，并需在优化后进行前后指标对比、真实用户监控、多设备与慢网络测试，确认无功能回退并关注用户感知。
应避免：未测量就优化、为性能牺牲可访问性、优化时破坏功能、滥用 will-change、懒加载首屏内容、只做微优化而忽略主要瓶颈、忽视受限浏览器的性能。
其他
关于该技能支持的具体平台、安装方式（如安装命令）、收费标准与授权方式，资料中暂未提供。