/ ディレクトリ / プレイグラウンド / Addy Osmani Agent Skills
● コミュニティ addyosmani ⚡ 即起動

Addy Osmani Agent Skills

作者 addyosmani · addyosmani/agent-skills

コーディングエージェント向けのプロダクションレベルエンジニアリングスキル — パフォーマンス・アクセシビリティ・セキュリティ・デバッグ — Addy Osmani(Google Chromeチーム、「Learning JavaScript Design Patterns」著者)がキュレーション。

AIコーディングエージェント向けの、意見を持ち実戦で検証されたスキルのバンドル。各スキルは特定のエンジニアリングプラクティスをエンコードしています(例:Core Web Vitalsの最適化・axe-core a11y監査・OWASPセキュアバイデフォルトレビュー・perfデバッグ)。スキルはエージェント非依存のMarkdownプラス実行可能なスクリプトで、Claude Code・Cursor・Codex・Gemini CLIで動作します。フロントエンドの現場からのメモで頻繁に更新されます。

なぜ使うのか

主な機能

ライブデモ

実際の動作

準備完了

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "addyosmani-agent-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "addyosmani-agent-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/addyosmani/agent-skills",
          "~/.claude/skills/addyosmani-agent-skills"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add addyosmani-agent-skills -- git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

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

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

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

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

前提条件
  • スキルのインストール — git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills
  • 監査するURLまたはリポジトリ — 公開URLまたはローカル開発サーバー
フロー
  1. 診断する
    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.✓ コピーしました
    → 「画像を最適化する」という一般的なアドバイスではなく、ファイル参照付きの原因ランキングリスト
  2. 修正する
    For the top LCP culprit, apply the fix. For images, prefer fetchpriority + AVIF/WebP fallback. Show diff and rationale.✓ コピーしました
    → コード変更 + 修正前/後の想定メトリクス影響
  3. 確認する
    Re-run Lighthouse locally. Compare to previous run.✓ コピーしました
    → 数値が改善;改善しなければ仮説が誤り — ステップ1に戻る

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

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

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

👤 B2Cサイトをリリースするフロントエンド開発者 ⏱ ~60 min intermediate

使うタイミング: a11yステータス不明のUIを引き継ぎ、チェックボックスではなく実際の監査が必要な場合。

フロー
  1. スイートを実行する
    Use the a11y skill on /app/components/. Run axe rules + heuristic checks for focus management and keyboard traps.✓ コピーしました
    → 重大度でグループ化された問題;ルールIDが含まれる
  2. トリアージする
    Group issues by component. Rank by user impact, not raw count.✓ コピーしました
    → 修正すべきコンポーネントのトップ10
  3. 1件を修正する
    Pick the highest-impact item. Apply the fix; don't break existing tests.✓ コピーしました
    → 修正がリリース;テストがグリーン

結果: 「axeを実行して完了」ではなく、実際のa11y改善。

注意点
  • 自動修正がデザインの意図を壊す(例:スタイル付きアイコンのみのボタンにラベルを強制する) — スキルは目に見えるラベルではなくaria-labelのような視覚的等価アプローチを優先します

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

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

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

フロー
  1. スキャンする
    Use the security skill. Scan src/ for: hardcoded secrets, unsafe SQL/NoSQL queries, missing rate limits on POST handlers, JWT misuse.✓ コピーしました
    → file:lineと重大度を含む所見テーブル
  2. 上位5件を修正する
    Fix the highest-severity items. Add tests where feasible.✓ コピーしました
    → 5件の修正が適用される

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

注意点
  • テストフィクスチャの偽陽性 — スキルはデフォルトで/tests/と/__fixtures__/を尊重します — 上書きには--include-testsを渡してください
組み合わせ: github

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

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

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

フロー
  1. 再現する
    Use the debug skill. First step: get a minimal reproduction.✓ コピーしました
    → 再現手順 + 単一の失敗テスト
  2. 二分探索する
    Bisect git history with the failing test as oracle.✓ コピーしました
    → 問題のあるコミットが特定される
  3. 修正する
    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 パフォーマンスのリグレッション 0
a11y.audit path リリース前のa11yチェック 0
security.scan path ローンチ前のセキュリティスイープ 0
debug.bisect failing_test, search_window 既知の正常なベースラインを持つリグレッション 0

コストと制限

運用コスト

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を見る