インストール
npx skills add addyosmani/web-quality-skills誰向けか
感覚でスタイルを直すのではなく、測定結果でウェブ品質を上げたい人向け。公式：これは非公式で測定優先の Agent Skills 集成。Google Lighthouse、エージェント向け Chrome DevTools、Core Web Vitals、WCAG、検索関連ガイダンスと組み合わせてウェブプロジェクトを最適化する。
より合うのは、開けるサイトまたはローカルプロジェクトがすでにあり、先に根拠つきの品質点検を1回したい人。原文が名指しするスキルは 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 があり、既存のウェブプロジェクトまたは到達できるサイトがある。点検する URL を作らない。
インストール場所：ワークスペースで実行する：
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 を行う。公式の起動文の1つを使い、Lighthouse とソースコード分類を横断点検させる。サイトがすでにあり、先に測定根拠が欲しい人向け。証拠が描くスキル行はこの1つだけ。他のスキル名はない。出力は点検結果として扱い、自動では外に出さない。
事例二：異なる枠組みのプロジェクトで同じ測定優先点検をする。公式は技術スタック非依存と書き、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。最初の操作で2経路を混ぜない。
このページが名指しするスキルは web-quality-audit だけ。他のスキル名は自分で補わない。
これは非公式の集成。公式は全 WCAG 条項を覆うとは保証せず、検索ガイダンスと DevTools を同時に開くことも求めていない。