Menu
セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。
体験品質（動き/触感/視線誘導）を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。
【穴埋め雛形】このプロジェクト固有の「存在設計・体験設計」のSSOT。judgment-harness のプロジェクト層スキルとして、立ち上げ時に本ファイルを埋めて使う（雛形のままなら未確定＝推測で決めない）。デザイン/UI/モーション/コピーの方針判断、見た目や体験のトーン決め、画面・コンポーネント設計の前段で必ず参照する。
UIを「情報設計（優先度/構造）＋インタラクション（状態遷移）＋ビジュアル（トーン）」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化（コンポーネント/トークン）に寄せる。
Agent Browser（Headlessブラウザ自動化CLI）を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。
アーキテクチャ設計（境界/依存/データフロー/非機能/運用）を、制約とトレードオフで言語化し、ADR-liteで合意形成しながら段階的に形にする。doc/input/rdd.md にアーキテクチャ/非機能/運用の要求がある、または設計判断（分割/責務/インタフェース/データ整合/観測性/スケール）相談で使う。
| 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 を付ける（可視ラベルがあるのに重複して読み上げ事故になる）。