agent-skills 前端实战：从需求到验收的性能优化六步法

让 AI 写一个商品列表页，卡片、筛选、加载动画很快就能出来。可一到验收就露馅：空列表没有提示，请求失败不能重试，手机上按钮还能被挤出屏幕。功能写了，但需求确认、测试和交付没有同步跟上。

Addy Osmani 的 agent-skills 把这些工程步骤整理成编程代理可以参考的技能，覆盖需求定义、计划、构建、验证、评审与发布，前端性能优化 只是其中一环。

先理解整套流程，再选一个入口

一个技能以 SKILL.md 为入口，说明何时使用、按什么步骤走、哪些信号需要停下来检查，以及哪些证据能支持任务完成。README 还补充了常见跳步理由和对应检查要求，帮助代理保持流程一致。

对前端来说，可以把这个流程落在一个页面的交付过程上：

依据仓库开发生命周期原创绘制；卡片中的页面任务是本文示例。

比如，先确定筛选条件和空态，再拆组件与接口任务；实现后检查交互和布局，最后做评审与发布准备。这样就能知道当前遗漏的是哪个环节，而不是反复追加“再完善一下”。

官方提供的 skills CLI 入口如下：第一行查看列表，第二行安装技能包；按提示选择自己使用的编程助手。

npx skills add addyosmani/agent-skills --list
npx skills add addyosmani/agent-skills

安装技能与安装完整原生插件不是一回事，斜杠命令、审查角色和共享参考资料的支持随接入方式不同而变化。本文用到的审查文件在仓库 agents/ 目录，缺少时需要另行提供，不能默认安装后全部具备。

先把“慢”说具体

商品列表第一次打开慢、切换筛选条件卡、往下滚动不顺畅，虽然都叫“慢”，但不该共用同一套修改方案。

先选一个现象。例如：首次打开列表时，首屏图片迟迟没有显示。把页面版本、浏览器、设备、网络条件和缓存状态记录下来，再准备测量材料。

仓库的 performance-optimization 给出的顺序是：建立基线、寻找瓶颈、修改、复测，再考虑防止回退。这个顺序能帮助你约束任务，也让后面的结论有据可查。

给代理一份任务，而不是一句愿望

本篇用 performance-optimization 指导步骤，用 web-performance-auditor 约束审查结论。可以从下面这份任务开始：

任务：检查商品列表页首次打开时图片出现慢的问题。
参考：performance-optimization、web-performance-auditor。
材料：页面代码、版本信息、测量报告和测试条件。

1. 先识别技术栈，列出已获得和缺少的证据。
2. 选择一个最值得验证的瓶颈，解释依据。
3. 提出最小修改，说明可能影响哪些功能。
4. 按相同条件复测，比较前后结果。
5. 输出保留、撤回或继续调查的结论。

没有测量材料的数值标为“未测量”。
证据不足时先列验证步骤，不承诺提速。

这是本文编写的练习提示词，不是仓库原文。

技能文件不会凭空带来浏览器、测量工具或用户数据。如果代理只能读代码，就先让它列出潜在问题与验证办法，等报告补齐后再继续。

看到“分数”，先问它从哪来

web-performance-auditor 明确区分静态检查和实际测量：单靠阅读源码，无法测出真实的 LCP、INP、CLS。没有测量数据，就不应该生成一张看似完整的成绩单。

原创证据分类图：源码线索、实验室结果和真实用户体验，各有适用范围。

拿到的材料	这时可以做什么
只有页面源码	提出潜在问题与验证计划
有实验室报告	判断该测试条件下的表现
有真实用户数据	观察实际使用环境下的体验

原来测桌面端，改完测手机；原来冷缓存，改完缓存已经命中，这样的数字不能直接归因于代码修改。先确保比较条件一致，再解释变化。

一次只改一个值得验证的问题

继续首屏图片的例子：先根据报告判断图片是否与问题有关，再决定改什么。不要同时更换组件库、重写路由和调整缓存，否则即使数字改善，也很难解释是哪项改动起了作用。

同样，框架专属方案必须与技术栈对应，项目的审查规则也强调这一点。

修改之后，用相同条件重新测量，并检查页面功能、图片显示和布局。数据没改善，就重新检查假设；出现回退，就考虑撤回。这些都是有效的工程结论。

最终交付：一份能继续验证的记录

把这一轮压缩成五项：问题现象、测量条件、瓶颈假设、最小改动、复测结论。原始报告单独保存，让后续的人能沿着记录继续检查。

这样，AI 帮你完成的不只是一次代码修改，还留下了选择方案与验证效果的过程。下次页面再次变慢，你也有可比较的起点。

想补图片、渲染与网络优化基础，可以看 云栈社区 的前端全链路性能优化资料。公开目录覆盖这些主题，部分内容年份较早，具体 API 需查当前文档；下载区需算力兑换。

agent-skills 仓库采用 MIT 许可。先拿一个能测的问题试起来，再决定哪些步骤适合保留在自己的开发流程里。

项目与学习入口

• 开源地址：github.com/addyosmani/agent-skills
• 前端性能优化课程：https://yunpan.plus/t/16346