ai-friendly-web-design-skill MCP — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

エージェントナビゲーションとアクセシビリティに最適化された14のデザイン原則
安定した data-testid / data-ai-action ロケーター命名規則
ホバー専用インタラクション、iframe/Shadow DOMバリアの排除
競合状態を防ぐ明示的なローディング状態
UIビルド/レビュー時に自動起動し、重大度付きで問題をフラグ

ライブデモ

実際の動作

ai-friendly-web-design-skill.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "ai-friendly-web-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "ai-friendly-web-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/ianho7/ai-friendly-web-design-skill",
          "~/.claude/skills/ai-friendly-web-design-skill"
        ]
      }
    }
  }
}

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

claude mcp add ai-friendly-web-design-skill -- git clone https://github.com/ianho7/ai-friendly-web-design-skill ~/.claude/skills/ai-friendly-web-design-skill

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

ユースケース

実用的な使い方： ai-friendly-web-design-skill

既存コンポーネントのエージェント対応状況を監査する

👤 エージェント経由でアクセスされるページを提供するWeb開発者 ⏱ ~30 min beginner

使うタイミング： サポートチャットボットやQAエージェントが正しいボタンを見つけられない場合。

前提条件

スキルのインストール — git clone https://github.com/ianho7/ai-friendly-web-design-skill ~/.claude/skills/ai-friendly-web-design-skill

フロー

Claudeにコンポーネントを渡す

Review this Checkout.tsx against ai-friendly-web-design principles. Flag severity.✓ コピーしました

→ 重大度順のリスト: critical（ホバー専用の送信ボタン）→ minor（aria-liveの欠落）
修正を適用する

Apply all critical + major fixes, keep visuals identical.✓ コピーしました

→ 修正済みコンポーネントと差分サマリー

結果： 人間にとって美しく、エージェントにとってアクセス可能なコンポーネント。

注意点

命名規則なしに data-testid をあちこちに追加してしまう — スキルの命名規則（data-testid='<area>-<action>'）に従わないと、名前が散逸します

組み合わせ： chrome-devtools

ネイティブコントロールと適切なARIAを使った新規フォームの構築

👤 決済やオンボーディングなど重要度の高いフォームを構築するフロントエンド開発者 ⏱ ~45 min intermediate

使うタイミング： スクリーンリーダーやエージェントをブロックしてはならない新規フォームを作成する場合。

フロー

原則に基づいてスキャフォールドする

Build a billing address form using ai-friendly-web-design. Native input types, labels, aria-describedby for errors, explicit loading on submit.✓ コピーしました

→ HTMLネイティブタイプ（email, tel）を使用し、カスタムコンボボックスのハックがないフォーム
ディープリンクとURL状態を追加する

Make the form step reflect in the URL so agents can open step 2 directly.✓ コピーしました

→ URLにstepパラメータが反映され、読み込み時に状態が復元される

結果： 支援技術とエージェントの両方がスムーズにナビゲートできるフォーム。

無限スクロールを予測可能なページネーションに置き換える

👤 エージェントが1ページ目から先に進めない問題を抱えるプロダクトエンジニア ⏱ ~30 min intermediate

使うタイミング： リストページが無限スクロールを使用しており、エージェントがファーストビュー以降のアイテムに到達できない場合。

フロー

ページネーション対応ルートにリファクタリングする

Replace the infinite-scroll list with URL-based pagination (?page=N). Keep scroll behavior feel.✓ コピーしました

→ アドレス指定可能なページ、ARIA付きのprev/nextリンク

結果： エージェントが決定的に巡回できるリスト。

注意点

既存のスクロールを完全に削除してSEOを損なう — 各ページ内のスクロール読み込みは維持し、ページ境界だけを明示的にする

組み合わせ

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

ai-friendly-web-design-skill + chrome-devtools

コンポーネントを実際に読み込み、エージェント用ロケーターが機能することを確認する

Load the patched component in devtools, verify data-testid values and aria attributes render.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング
review_component	component path/source	UIのPRまたは監査時
apply_principles	component + findings	レビュー後
scaffold_agent_friendly	UI spec	新規UIの構築時

コストと制限

運用コスト

APIクォータ: なし
呼び出しあたりのトークン: 中程度 — コンポーネント＋レビュー分
金額: 無料
ヒント: キーストロークごとではなく、PR時にレビューを実行してください

セキュリティ

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

認証情報の保管： なし

データ送信先： なし

トラブルシューティング

よくあるエラーと対処法

レビューで問題なしと表示されるが、エージェントがボタンを見つけられない

Chrome DevToolsのスナップショットで確認してください。Shadow DOMが静的レビューから隠蔽している可能性があります

data-testid の名前が既存テストと衝突する

自動命名の前に、スキルに独自の命名規則を指定してください

代替案

ai-friendly-web-design-skill 他との比較

代替案	代わりに使う場面	トレードオフ
Manual a11y review + Lighthouse	エージェントナビゲーションではなく、アクセシビリティのみを重視する場合	安定したロケーターなど、エージェント固有の課題はカバーされない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

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