addyosmani-quality について
addyosmani-qualityは、ウェブ品質の評価と改善に使う6つの専門スキル群です。総合監査に加え、アクセシビリティ、Core Web Vitals、性能、SEO、モダンウェブのベストプラクティスを扱います。
主な機能
- 01ウェブ品質の総合監査
- 02WCAG 2.2アクセシビリティの確認
- 03Core Web Vitalsの最適化
- 04読み込み時と実行時の性能評価
- 05SEOと構造化データの改善
- 06セキュリティとウェブのベストプラクティス確認
活用シーン
- 01複数の品質領域にわたるウェブサイト監査
- 02サイトのアクセシビリティ上の問題確認
- 03ページ速度とCore Web Vitalsの調査
- 04検索での可視性と構造化データの改善
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ podo/ design-agent-skills --skill addyosmani-qualityインストール後、Claude Code で/addyosmani-qualityを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
addyosmani-quality
カタログのスタブ — 完全なパッケージ:addyosmani/web-quality-skills
判断ツリー
-
完全なスキルはすでにインストールされていますか? このパッケージは6つのスキル(
web-quality-audit、accessibility、core-web-vitals、performance、seo、best-practices)をインストールします。まずは最初のスキルを確認します。- グローバル:
f=~/.agents/skills/web-quality-audit/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" - プロジェクト:
f=.agents/skills/web-quality-audit/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" installed→ スキルがweb-quality-auditとしてインストールされています。これを呼び出して続行しますpointer→ ステップ2に進みます
- グローバル:
-
スコープを検出してから、インストールします:
[ -e ~/.agents/skills/addyosmani-quality ] && echo "global" || echo "project"グローバル:
npx skills add addyosmani/web-quality-skills --skill web-quality-audit accessibility core-web-vitals performance seo best-practices -g -yプロジェクト:
npx skills add addyosmani/web-quality-skills --skill web-quality-audit accessibility core-web-vitals performance seo best-practices -yClaude Code: 会話を離れずにコマンドを実行するには、
!で始まるコマンドをチャットメッセージとして送信します。
Claude Code プラグイン経由:
/plugin marketplace add addyosmani/web-quality-skills
/plugin install web-quality-skills@addy-web-quality-skills
ご注意
- ライセンス: MIT
インストール後の呼び出し
web-quality-audit— 「Lighthouse audit」、「web quality」、「audit my site」accessibility— 「WCAG compliance」、「screen reader」、「keyboard nav」core-web-vitals— 「LCP」、「INP」、「CLS」、「Core Web Vitals」performance— 「page speed」、「loading performance」seo— 「SEO」、「structured data」、「crawlability」best-practices— 「web security」、「modern APIs」、「code quality」
機能
Addy Osmani(Google Chrome)によるウェブ品質スイートです。各スキルは、エビデンスに基づいた特定分野向けの実践ガイドです。パフォーマンス、アクセシビリティ、SEO、ベストプラクティス、エージェントによるブラウジングを対象にした包括的なLighthouse形式の監査、WCAG 2.2への対応、フィールドデータとラボデータを用いたCore Web Vitalsの最適化、読み込み時と実行時のパフォーマンス、検索での可視性と構造化データ、セキュリティとモダンウェブのベストプラクティスを扱います。まずweb-quality-auditを使い、修正内容に応じて特定分野向けのスキルに進んでください。
使用しない場合
- WCAG 2.2のガイダンスに特化したワークフロー(デザインから適合性ドキュメントまで) →
wcag-ai-skillを使用します - コード内の色のコントラストやアクセシビリティに関する個別の修正 →
fixing-accessibilityを使用します - モーションに特化したカクつき(レイアウトのスラッシング、コンポジターのプロパティ) →
fixing-motion-performanceを使用します