optimize

概览

optimize 技能旨在帮助开发者系统地诊断和修复 Web 应用中的 UI 性能问题。它专注于提升加载速度、渲染效率、动画流畅度、图像优化以及减小包体大小。当你遇到界面响应缓慢、卡顿或用户反馈加载时间长、交互不流畅时，使用 optimize 技能。

谁适合使用 optimize？

• 希望提升网站速度和响应性的前端开发者。
• 遇到用户抱怨界面缓慢或无响应的团队。
• 拥有大型 JavaScript 包、不优化图像或动画问题的项目。

optimize 解决的问题

• 页面首次加载缓慢和交互时间过长。
• 大尺寸或未压缩图像影响性能。
• 渲染效率低下或布局抖动。
• 动画卡顿和不流畅。
• 过大的 JavaScript 或 CSS 包体。

使用方法

安装步骤

1. 通过以下命令安装 optimize 技能：

   npx skills add https://github.com/pbakaus/impeccable --skill optimize

2. 首先阅读 SKILL.md 文件，了解工作流程和推荐方案。

3. 查看辅助文件，如 README.md、AGENTS.md、metadata.json 以及相关文件夹 rules/、resources/、references/ 或 scripts/，获取更多背景信息和辅助工具。

在项目中应用 optimize

• 评估性能： 测量当前指标，如核心网页指标（LCP、FID/INP、CLS）、加载时间、包体大小和运行时性能。识别具体瓶颈——是大图像、重 JavaScript 还是渲染效率低。
• 制定优化计划： 根据影响优先处理。重点优化图像（现代格式、压缩、懒加载）、减小包体大小、提升渲染和动画性能。
• 迭代测量： 变更前后均进行基准测试，确保优化效果达标。

推荐预览文件

• SKILL.md（主要工作流程和建议）

常见问题

optimize 技能能做什么？

optimize 技能提供结构化方法，诊断并修复前端性能问题，包括加载缓慢、渲染延迟、动画问题和资源体积过大。

什么时候应该使用 optimize？

当你的应用感觉缓慢，用户反馈卡顿，或者你想提升加载时间和响应速度时，使用 optimize。

如何开始使用？

通过提供的 npx 命令安装技能，然后按照 SKILL.md 中的指导评估并解决性能瓶颈。

哪里可以找到更多细节或脚本？

请查看仓库的 Files 标签页，获取更多资源、参考资料和辅助脚本，支持你的优化工作流程。