Claude Codeレベルでページのアクセシビリティ問題を監査する

a11yステータス不明のUIを引き継ぎ、チェックボックスではなく実際の監査が必要な場合。「axeを実行して完了」ではなく、実際のa11y改善。

Addy Osmani Agent Skills — インストール & ライブデモ

Name: Addy Osmani Agent Skills (Claude Skill)
Author: addyosmani

なぜ使うのか

主な機能

パフォーマンススキル：Core Web Vitals・レンダーバジェット・INPデバッグ
アクセシビリティ：axe + スクリーンリーダーウォークスルースクリプト
セキュリティ：OWASPに焦点を当てたレビューとシークレットスキャン
デバッグ：構造化された根本原因ワークフロー、プロファイラー補助
複数コーディングエージェントで動作（Claude Code・Cursor・Codex・Gemini CLI）
MIT、テレメトリなし

ライブデモ

実際の動作

準備完了

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： Addy Osmani Agent Skills

Claudeが重い処理を担ってCore Web Vitalsの問題を修正する方法

👤 フロントエンドエンジニア、パフォーマンス意識の高いチーム ⏱ ~90 min intermediate

使うタイミング： PageSpeedが低下し、LCPが2.5秒を超え、ビジネスから理由を問われている場合。

フロー

診断する

Use the perf skill on https://mysite.com. Pull a CrUX report, run a Lighthouse trace, and identify the top 3 LCP and INP culprits.✓ コピーしました

→ 「画像を最適化する」という一般的なアドバイスではなく、ファイル参照付きの原因ランキングリスト
修正する

For the top LCP culprit, apply the fix. For images, prefer fetchpriority + AVIF/WebP fallback. Show diff and rationale.✓ コピーしました

→ コード変更 + 修正前/後の想定メトリクス影響
確認する

Re-run Lighthouse locally. Compare to previous run.✓ コピーしました

→ 数値が改善；改善しなければ仮説が誤り — ステップ1に戻る

結果： ペーパートレイル付きの測定可能なLCP/INP改善。

注意点

Claudeが重いフレームワーク書き直しに積極的に走る — スキルには「最小限の変更」ルールがあります — エージェントが脱線したら貼り付けてください

組み合わせ： filesystem

TypeScriptコードベースにセキュアバイデフォルトレビューを実行する

👤 専任セキュリティチームのいない開発者 ⏱ ~75 min advanced

使うタイミング： ローンチ前に、ペンテストではなく何もないよりはマシなスイープが欲しい場合。

フロー

スキャンする

Use the security skill. Scan src/ for: hardcoded secrets, unsafe SQL/NoSQL queries, missing rate limits on POST handlers, JWT misuse.✓ コピーしました

→ file:lineと重大度を含む所見テーブル
上位5件を修正する

Fix the highest-severity items. Add tests where feasible.✓ コピーしました

→ 5件の修正が適用される

結果： 基本的なセキュリティレビューに失敗しないコードベース。

注意点

テストフィクスチャの偽陽性 — スキルはデフォルトで/tests/と/__fixtures__/を尊重します — 上書きには--include-testsを渡してください

組み合わせ： github

リグレッションに構造化デバッグスキルを使用する

👤 「昨日は動いていた」バグを抱える開発者 ⏱ ~60 min intermediate

使うタイミング： 30分推測してきた — 構造化された根本原因フローに切り替える時。

フロー

再現する

Use the debug skill. First step: get a minimal reproduction.✓ コピーしました

→ 再現手順 + 単一の失敗テスト
二分探索する

Bisect git history with the failing test as oracle.✓ コピーしました

→ 問題のあるコミットが特定される
修正する

Surgical fix — preserve the intended behavior of the offending commit.✓ コピーしました

→ 説明付きで修正がコミット

結果： 勘ではなく、テストに裏付けられた再現可能な修正。

注意点

バグがコードにない（環境/データ）のに二分探索を過剰適用する — スキルはチェックリストの順序通りに環境/データを最初に確認します — 順序に従ってください

組み合わせ： github

組み合わせ

他のMCPと組み合わせて10倍の力を

addyosmani-agent-skills + github

スキル出力からPRをオープンする

After perf fixes, open a PR titled 'perf(LCP): -300ms via image priority hints'.✓ コピーしました

addyosmani-agent-skills + filesystem

スキル監査レポートを永続化する

Save audit reports to /reports/$(date +%F)/ for trend tracking.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング
perf.audit	url_or_path	パフォーマンスのリグレッション
a11y.audit	path	リリース前のa11yチェック
security.scan	path	ローンチ前のセキュリティスイープ
debug.bisect	failing_test, search_window	既知の正常なベースラインを持つリグレッション

コストと制限

運用コスト

APIクォータ: N/A — ローカルスキル
呼び出しあたりのトークン: 大規模なレビューは高くなることがあります；大きなコードベースは50k+ tokenを使用
金額: 無料（MIT）
ヒント: サイト全体ではなくルートごとにperf/a11yを実行してコストを抑えてください

セキュリティ

権限、シークレット、影響範囲

最小スコープ： filesystem-read

認証情報の保管： なし

データ送信先： LighthouseはローカルでRuns；監査対象のURLのみフェッチ

スキルの出力にはソースコードが引用される場合があります — 外部と共有する前にレビューしてください

トラブルシューティング

よくあるエラーと対処法

Lighthouseが起動に失敗する

Node 18+とChromeをインストールしてください；スキルは両方をPATHで期待します

確認： `npx lighthouse https://example.com`がスタンドアロンで動作すること

axeルールが古い

スキルはピン留めされたaxeバージョンで出荷されます；定期的にgit pullで更新してください

非決定論的テストで二分探索が終わらない

--repeat 3を渡して各コミットを3回テストしてください — フレイキーなテストがフィルタリングされます

代替案

Addy Osmani Agent Skills 他との比較

代替案	代わりに使う場面	トレードオフ
wshobson/agents	バックエンド / データ / DevOpsの幅広いロールカバレッジが欲しい場合	wshobsonは広い；Addyのバンドルはweb-perf/a11yに深い
Anthropicの公式スキル	汎用的な公式保証済みのビルディングブロックが欲しい場合	意見が少ない；実践者の形状が少ない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る