Web Quality Skills 是什麼、怎麼安裝使用：Addy Osmani 的網頁質素 Skills（Lighthouse、Core Web Vitals、無障礙、SEO）

本文根據 addyosmani/web-quality-skills 倉庫 README 整理，資料核對於 2026-10-11。截至當日，GitHub 顯示該倉庫約 2922 Star、254 Fork，最近一次推送在 2026-08-24；skills.sh 榜單上其中的 accessibility 技能累計安裝約 6.0 萬次。README 自述為非官方項目。

是什麼

Addy Osmani 是在 Google 工作多年的知名工程師和技術作者，長期寫網頁性能方面的內容；站內已收錄他的另一個工程流程技能庫 addyosmani/agent-skills。Web Quality Skills 是他單獨開的一個小庫，README 的定位是：一組（非官方的）以測量為先的 Agent Skills，用 Google Lighthouse、面向智能體的 Chrome DevTools、Core Web Vitals、WCAG 和搜尋指南來優化網頁項目，不限框架——React、Vue、Angular、Svelte、Next.js、Nuxt、Astro 或純 HTML 都適用。

README 用一句話區分了它和介面規範類技能：介面規範告訴你做什麼，這組技能告訴你怎麼把它做得快、可訪問、對搜尋引擎友好。

包含哪些 Skill

共 6 個：

• web-quality-audit：以證據為依據的綜合評審，覆蓋 Lighthouse 的各個類別和源碼層面；
• performance：實地數據加實驗室測量、性能追蹤，以及加載和運行時的修復；
• core-web-vitals：針對 LCP、INP、CLS 的測量、診斷與優化；
• accessibility：WCAG 合規、讀屏器支持、鍵盤導航；
• seo：可抓取性、結構化數據等搜尋優化；
• best-practices：安全、現代接口和代碼質素模式。

它的測量模型把四種證據分得很清楚：CrUX 的實地數據（真實 Chrome 用戶近期的體驗）、站點自己的真實用戶監控、DevTools 追蹤或 Lighthouse 的實驗室運行（一次受控的瀏覽器會話裏發生了什麼、為什麼）、靜態源碼檢查（頁面跑不起來時可能有什麼問題）。

閾值參考裏列了核心網頁指標的標準：LCP 不超過 2.5 秒、INP 不超過 200 毫秒、CLS 不超過 0.1 算「良好」，並註明這是按真實用戶數據的第 75 百分位評估的，不是對單次實驗室運行的要求。

怎麼安裝

README 的命令：

bash
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）。Codex 用 codex plugin marketplace add addyosmani/web-quality-skills，Gemini CLI 用 gemini extensions install https://github.com/addyosmani/web-quality-skills。

可選的 Chrome DevTools 集成：智能體接了 Chrome DevTools MCP 時，技能會優先用它做性能追蹤和 Lighthouse 審計，讀取渲染後的無障礙快照、控制台消息和網絡請求。沒接也能用，會退回到 Lighthouse 命令行、PageSpeed Insights 與 CrUX 工具、手動檢查和靜態分析。

怎麼用

README 給的觸發說法：

• 「審計我的網站」「檢查網頁質素」——web-quality-audit；
• 「改善核心網頁指標」「修 LCP」「降低 CLS」——core-web-vitals；
• 「做一次 WCAG 審計」——accessibility；
• 「優化 SEO」「修一下 meta 標籤」——seo。

適合誰 / 不適合誰

適合：

• 前端開發者在上線前做性能和無障礙自查；
• 想讓智能體「先測量、再動手」而不是憑印象優化的團隊。

不適合：

• 非網頁項目；
• 想要營銷層面的 SEO 策略（關鍵詞、內容規劃）的人，它的 seo 技能偏技術側。

注意事項

• 許可：MIT。README 標明是非官方項目，不代表 Google。
• 實地數據的前提：CrUX 只收錄流量達到一定規模的站點，小站可能查不到，只能依賴實驗室數據。
• 會運行審計工具並訪問你指定的網址；接入 DevTools MCP 後，智能體可以讀取頁面的網絡請求和控制台內容，注意不要在帶敏感登入態的瀏覽器裏對線上後台做審計。
• 實驗室分數會隨機器和網絡波動，以多次運行和真實用戶數據為準。