用途:在仅有技能(skills-only)的环境中运行原 Impeccable /optimize 工作流,系统化改善前端界面性能,覆盖加载速度、渲染、动画、图片和打包体积,并以前端设计原则作为基础护栏。用户提到的命令参数视为范围提示;上下文缺失时应提出澄清问题。
主要能力:先评估现状,测量 Core Web Vitals(LCP、FID/INP、CLS)、加载时间、包体积、运行时帧率与内存 CPU、网络请求与瀑布流,识别瓶颈并判断影响程度和受影响用户。再制定优化计划:加载方面采用现代图片格式、响应式图片、懒加载、压缩与 CDN,做代码分割、tree shaking、移除未用依赖、动态导入、CSS 精简与关键 CSS、字体优化(font-display、子集化、预加载);渲染方面避免布局抖动、减少 DOM 深度与大小、用 contain 和 content-visibility、对长列表虚拟滚动;动画方面优先 transform 与 opacity 走 GPU,目标 60fps,使用 requestAnimationFrame 和 Intersection Observer;框架方面在 React 中用 memo、useMemo、useCallback 并虚拟化长列表;网络方面合并请求、压缩响应、合理缓存与 CDN;并针对 LCP、FID/INP、CLS 给出具体优化手段。
使用方式:作为技能调用该优化工作流,可把用户参数当作优化范围提示;流程为测量、定位瓶颈、制定并实施优化、再测量对比前后指标。工具建议使用 Chrome DevTools(Lighthouse、Performance)、WebPageTest、Core Web Vitals、包分析器和性能监控服务。
限制与注意:必须先在真实设备和真实网络条件下测量,避免过早优化;不要为性能牺牲可访问性,不要破坏功能,不要到处使用 will-change,不要懒加载首屏内容,不要只顾微小优化而忽略最大瓶颈,不要忽略移动端性能。优化后需在低端安卓、3G 限速等条件下验证无回归且用户感知变快。文档未提供收费、价格、平台支持范围或具体安装命令等信息。