/ ディレクトリ / プレイグラウンド / ai-friendly-web-design-skill
← 全サーバー ↗ GitHub
● コミュニティ ianho7 ⚡ 即起動

ai-friendly-web-design-skill

作者 ianho7 · ianho7/ai-friendly-web-design-skill

AIエージェントが確実にナビゲートできるWeb UIを構築するための14のデザイン原則と自動レビュー機能 — セマンティックHTML、安定したテストID、隠れたインタラクションの排除。

人間とオートメーション/エージェントの双方にとって使いやすいUIを実現する14のデザイン原則を適用するClaude Codeスキルです。セマンティックHTML、ARIA、安定したdata-testid / data-ai-actionロケーター、ネイティブフォームコントロール、無限スクロールではなくページネーション、明示的なローディング状態、URLディープリンク、明確なエラー表示、UI＋APIの二重エントリーポイントを網羅します。ClaudeがUIコンポーネントをビルドまたはレビューする際に自動で適用されます。

▶ デモを見る 📦 インストール 💡 ユースケース

なぜ使うのか

主な機能

ライブデモ

実際の動作

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

インストール

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

ユースケース

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

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

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

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

フロー
  1. Claudeにコンポーネントを渡す
    Review this Checkout.tsx against ai-friendly-web-design principles. Flag severity.✓ コピーしました
    → 重大度順のリスト: critical（ホバー専用の送信ボタン）→ minor（aria-liveの欠落）
  2. 修正を適用する
    Apply all critical + major fixes, keep visuals identical.✓ コピーしました
    → 修正済みコンポーネントと差分サマリー

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

注意点
  • 命名規則なしに data-testid をあちこちに追加してしまう — スキルの命名規則（data-testid='<area>-<action>'）に従わないと、名前が散逸します
組み合わせ： chrome-devtools

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

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

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

フロー
  1. 原則に基づいてスキャフォールドする
    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）を使用し、カスタムコンボボックスのハックがないフォーム
  2. ディープリンクとURL状態を追加する
    Make the form step reflect in the URL so agents can open step 2 directly.✓ コピーしました
    → URLにstepパラメータが反映され、読み込み時に状態が復元される

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

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

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

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

フロー
  1. ページネーション対応ルートにリファクタリングする
    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または監査時 0
apply_principles component + findings レビュー後 0
scaffold_agent_friendly UI spec 新規UIの構築時 0

コストと制限

運用コスト

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

セキュリティ

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

認証情報の保管： なし
データ送信先： なし

トラブルシューティング

よくあるエラーと対処法

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

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

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

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

代替案

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

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

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

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