メニュー
セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。
体験品質（動き/触感/視線誘導）を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。
【穴埋め雛形】このプロジェクト固有の「存在設計・体験設計」のSSOT。judgment-harness のプロジェクト層スキルとして、立ち上げ時に本ファイルを埋めて使う（雛形のままなら未確定＝推測で決めない）。デザイン/UI/モーション/コピーの方針判断、見た目や体験のトーン決め、画面・コンポーネント設計の前段で必ず参照する。
UIを「情報設計（優先度/構造）＋インタラクション（状態遷移）＋ビジュアル（トーン）」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化（コンポーネント/トークン）に寄せる。
Agent Browser（Headlessブラウザ自動化CLI）を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。
アーキテクチャ設計（境界/依存/データフロー/非機能/運用）を、制約とトレードオフで言語化し、ADR-liteで合意形成しながら段階的に形にする。doc/input/rdd.md にアーキテクチャ/非機能/運用の要求がある、または設計判断（分割/責務/インタフェース/データ整合/観測性/スケール）相談で使う。
SOC 職業分類に基づく
| name | accessibility-engineer |
| user-invocable | false |
| description | セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。 |
/design-ui / /design-assemble / フロント実装）に入るときは、原則このskillを併用する。button / a / label / input 等）で解決する。ARIAは最後の手段。role/aria-* を足して“それっぽく”しない。要件があるときだけ付ける。h1→h2…）。見た目のために見出しを飛ばさない。header/nav/main/footer、必要なら aside）。ul/ol/li、定義は dl/dt/dd を使う（div で代替しない）。aria-label（可視テキストを置けない場合）aria-labelledby（既存要素を参照して名前を構成する場合）label と input を関連付ける（for/id）。プレースホルダをラベル代わりにしない。aria-describedby で補助文を紐付け）。disabled はネイティブ属性を優先（button disabled 等）。aria-pressed / aria-expanded など要件に合う属性で状態を表す（ネイティブ要素で足りない場合のみ）。aria-live を使う（乱用しない）。tabindex で無理矢理並べ替えない）。tabindex="0" は「フォーカス可能にする」最小用途でのみ。tabindex="-1" は「プログラム的にフォーカス移動したい」時のみ。focus-visible）を必ず担保する（消さない）。alt を付ける（装飾なら空 alt=""）。div に onClick を付けてボタン扱い（キーボード/役割が崩れる）。role="button" で誤魔化す（ネイティブの button を使う）。aria-label を付ける（可視ラベルがあるのに重複して読み上げ事故になる）。