avilaok8647/ai-friendly-web-design-skill

ai-friendly-web-design-skill は何をしますか？

セマンティックHTML、ARIA、安定したロケーター、フォームのベストプラクティスを使用して、AIに優しいウェブインターフェースを構築し、自動化とアクセシビリティを向上させます。

はじめに

このスキルは、AIエージェント（Claude Code、Cursor、Codexなど）が効率的に操作・理解できるウェブインターフェースを設計・構築するためのガイドラインとベストプラクティスを提供します。

主な機能

• セマンティックHTML: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> などの要素を使用して、文書の構造を明確に定義します。
• ARIAランドマークとプロパティ: role="banner", role="navigation", aria-label, aria-labelledby, aria-describedby などを使って、アクセシビリティとAIのコンテキスト理解を向上させます。
• 安定したロケーター: CSSクラスやIDに依存せず、data-testid や aria-label などの安定した属性をテストロケーターとして使用します。
• フォームのベストプラクティス: 各入力フィールドに明確な <label> を関連付け、エラーメッセージを aria-describedby でリンクし、適切な入力タイプ（type="email", type="tel" など）を使用します。

使用例

<!-- セマンティックHTMLとARIAの例 -->
<header role="banner">
  <nav aria-label="メインナビゲーション">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">概要</a></li>
    </ul>
  </nav>
</header>

<main>
  <section aria-labelledby="section-title">
    <h2 id="section-title">製品一覧</h2>
    <div data-testid="product-list">
      <!-- 製品カード -->
    </div>
  </section>

  <!-- フォームの例 -->
  <form>
    <div>
      <label for="email">メールアドレス</label>
      <input type="email" id="email" name="email" aria-describedby="email-error" required>
      <span id="email-error" role="alert">有効なメールアドレスを入力してください。</span>
    </div>
    <button type="submit" data-testid="submit-btn">送信</button>
  </form>
</main>

サポート対象のプラットフォーム

• Claude Code
• Cursor
• Codex
• その他のAIエージェントツール

インストール方法

このスキルは、AIエージェントの設定ファイルに追加することで使用できます。詳細は各プラットフォームのドキュメントを参照してください。

ライセンス

MIT