Addy Osmani 把 Chrome 经验做成了 6 个性能审计 Skill,前端开发者值得装一份
Addy Osmani 把压箱底的东西掏出来了。这位 Google Chrome 工程总监、写过《Learning JavaScript Design Patterns》的大神，把十几年前端性能经验打包成 6 个 Agent Skills，交给 Claude / Cursor / Codex 直接用——上线 8 个月 2,854 颗星。
不是又一个「万能性能 Skill」
大多数性能 Skill 都是泛泛而谈：「优化页面」「减少请求」「用 CDN」——听完跟没听一样。Addy 的做法反过来：每个 Skill 只盯一个真实问题域，附完整诊断流程 + 修复模式。
6 个 SKILL.md 分别覆盖：
- Core Web Vitals & LCP——Largest Contentful Paint 拆解、Hero image 优化、preload/fetchpriority 实战
- Accessibility Audit——WCAG 2.2 清单、ARIA 误用、键盘导航陷阱
- JavaScript Performance——long task 拆分、主线程阻塞定位、输入延迟
- Layout Shift (CLS)——图像/字体/动态注入造成的抖动配方
- React 性能——memo 误用、context 抖动、useState 重渲染路径
- Bundle & Asset 优化——code splitting、tree shaking、字体子集化 ROI
为什么这是开发者向的 Skill 集
它解决的不是「AI 帮我写代码」，而是「AI 帮我审我自己写的代码」。把仓库交给 Claude，装上这 6 个 Skill 后说一句 audit my dashboard，Claude 就会按 Lighthouse 12.x 指标体系，把 LCP/INP/CLS 的真实问题一个个摆出来。
关键设计：Skills 按触发描述自动加载。不用死记 slash command，描述里出现「为什么页面慢」「CLS 高」「React 组件卡」对应 Skill 就激活。README 写得很直白：Skills activate automatically based on trigger phrases。
落地姿势
- 项目级：克隆到
.claude/skills/web-quality-skills/ - 全局：
~/.claude/skills/，所有项目共享 - npx：
npx skills add addyosmani/web-quality-skills
实测在 Next.js 14 项目上，Claude 加载 Bundle 优化 Skill 后给出的 code splitting 建议，准确命中了动态 import 边界，比 Copilot 通用回答靠谱一档。
对独立开发者的真正价值
很多人不知道——Addy Osmani 是 Chrome 核心人物，Core Web Vitals 指标体系本身就有他的影子。这 6 个 Skill 不是「第三方解读」，是「制定规则的人给的执行手册」。对没预算请前端架构师的独立开发者来说，装上等于白嫖一个 Google 工程师当 code reviewer。
License MIT，Shell 写（SKILL.md 元数据 + 文档），零运行时依赖。最近 push 是 2026-09-28，一直在补新 trigger。
一句话：当别人用 AI 写代码时，你已经在用 AI 审代码了。
👉 GitHub: addyosmani/web-quality-skills
评论区
登录后可评论。