安裝
npx skills add addyosmani/web-quality-skills適合誰
適合要按測量結果優化網頁品質，而不是只憑感覺改樣式的人。官方寫明：這是一套非官方、測量優先的 Agent Skills 合集，用來配合 Google Lighthouse、面向 agent 的 Chrome DevTools、Core Web Vitals、WCAG 和搜尋相關指引，優化網頁專案。
更合適的人，是已經有一個可打開的站點或本機專案，想先做一次以證據為準的品質檢查的人。原文點名的技能是 web-quality-audit：跨 Lighthouse 與原始碼類別做檢查。觸發說法包括 “Audit my site”、“Review this for quality”、“Check web quality”。
它宣稱與技術棧無關，可與 React、Vue、Angular、Svelte、Next.js、Nuxt、Astro、純 HTML 等一起用。不要把這份名單理解成「只支援這些框架」。
開始前要能執行 npx skills add。主路徑不要改成其他安裝器。
3 分鐘完成第一次嘗試
只走倉庫給出的 npx 主路徑。第一次只做檢查，不改線上程式碼。
前置條件：本機已有 npm/npx，並且手頭有一個已存在的網頁專案或可造訪的站點。不要發明要檢查的網址。
安裝位置：在工作區執行：
npx skills add addyosmani/web-quality-skills
官方倉庫：
https://github.com/addyosmani/web-quality-skills
技能說明錨點：
https://github.com/addyosmani/web-quality-skills#web-quality-audit
Lighthouse 概覽：
https://developer.chrome.com/docs/lighthouse/overview/
低風險觸發：安裝後，對既有專案說 “Check web quality” 或 “Review this for quality”。官方把這描述為以證據為準的檢查。先看報告，再決定要不要改檔案。Agent Skills 規範頁僅作原文指向：
https://agentskills.io/
成功訊號：助手按 Lighthouse 與原始碼類別給出檢查結果，而不是直接提交補丁。若下一步要改效能或無障礙程式碼，先確認將改哪些檔案。
使用案例
案例一：對現有站點做 web-quality-audit。用官方觸發句之一，讓助手做跨 Lighthouse 與原始碼類別的檢查。適合已經有站點、想先拿到測量依據的人。證據只描述這一個技能列，沒有寫出其他技能名。把輸出當檢查結果，不要自動外送。
案例二：在不同框架的專案裡做同一種測量優先檢查。官方寫明與技術棧無關，並舉例 React、Vue、Angular、Svelte、Next.js、Nuxt、Astro 和純 HTML。適合專案棧已經固定、只想加品質檢查的人。不要推斷「必須用其中某個框架」，也不要補寫未出現的技能名。
使用界線
主安裝命令是 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-audit。其他技能名不要自行補全。
這是非官方合集。官方沒有保證它涵蓋全部 WCAG 條款，也沒有要求必須同時打開搜尋指引和 DevTools。