web-quality-skills：让 agent 先测量再优化

LLM 给的 Web 性能建议听起来头头是道，一测量就露馅：万能的懒加载小贴士、对你的 LCP 靠猜、可访问性修复完全没考虑读屏软件的真实行为。addyosmani/web-quality-skills（2.7k 星，Addy Osmani 出品）是一份"测量优先"的合集：让 agent 先收集证据——Lighthouse 审计、Core Web Vitals、CrUX 真实用户数据、WCAG 2.2——再动你的代码。

为什么这个 Skill 重要

六个 skill 把领域切得干净：web-quality-audit 基于 Lighthouse 和源码类别做循证审查；performance 负责真实/实验室测量、trace、加载与运行时修复；core-web-vitals 专攻 LCP、INP、CLS；accessibility 覆盖 WCAG 合规、读屏支持和键盘导航；再加 seo 和 best-practices。合集与框架无关——React、Vue、Angular、Svelte、Next.js、Nuxt、Astro、纯 HTML 都适用。

它的差异化在测量模型。skill 把四类证据分得清清楚楚：CrUX 真实用户数据（真实 Chrome 用户近期的体验）、一方 RUM、DevTools trace 或 Lighthouse 实验室单次运行、静态源码检查（页面跑不起来时可能有什么问题）。README 的纪律——"真实数据决定用户影响，实验室 trace 负责复现和诊断"——恰恰是通用 LLM 建议会跳过的那一步。

安装

标准安装器：

npx skills add addyosmani/web-quality-skills

或用 Claude Code 插件方式，带命名空间和版本化更新：

/plugin marketplace add addyosmani/web-quality-skills
/plugin install web-quality-skills@addy-web-quality-skills

命名空间调用形如 /web-quality-skills:performance，/plugin update 负责升级。Codex CLI v0.122+ 有自己的 marketplace 路径，Gemini CLI 则作为扩展安装——README 链接了对应设置文档。

实战：一次循证的性能优化

1. 装上合集，在项目里开会话。
2. 提示审计 skill：

Audit my site for quality and performance issues

3. web-quality-audit 收集 Lighthouse 结果（装了 Chrome DevTools MCP 时 agent 可以跑实时审计）和源码级发现，然后 performance 和 core-web-vitals 诊断这些数字对 LCP、INP、CLS 意味着什么。
4. 只修证据支持的问题，修完重跑审计确认变化——这是 README 自己的闭环，不是一锤子重写。

skill 的描述就是触发词："optimize performance"、"fix LCP"、"improve accessibility"、"audit my site" 都能直接路由到对应 skill。

实战：分清真实数据与实验室噪音

追合成评分之前，先问真实数据那一侧：这些 skill 被写成先查 CrUX 资格和真实用户上下文。README 把界限划得很清楚——在自己浏览器里跑一次的 PerformanceObserver 片段是实验室观察，不是真实用户数据。这个框架正好防止经典错误：优化一个用户根本没有的问题。

技巧

• Claude Code 优先用插件安装——命名空间能避免这六个 skill 和你可能装的其他质量类工具冲突。
• 可访问性部分的范围是 WCAG 2.2、读屏软件和键盘导航——是真正的审计覆盖，不是 alt-text 提醒。
• 手动安装就一次拷贝：cp -r skills/* ~/.claude/skills/，读的目录和插件用的是同一个。

何时不用这个 Skill

这些 skill 做审计和给建议；CI 里持续的性能回归门禁仍然需要 Lighthouse CI 之类的工具来跑数字。如果项目已经有成熟的性能文化，这里的价值是循证工作流本身，不是新知识。

查看 排行榜 了解更多 skill。