Menú
UIキーボードショートカットを「公式基準（W3C APG / WCAG）＋プラットフォーム規約（Apple HIG / Fluent UI）＋デファクトスタンダード（GitHub・Gmail・Slack等）」に沿って設計し、衝突なく・発見しやすく・無効化可能な形で実装するための判断軸。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。
体験品質（動き/触感/視線誘導）を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。
【穴埋め雛形】このプロジェクト固有の「存在設計・体験設計」のSSOT。judgment-harness のプロジェクト層スキルとして、立ち上げ時に本ファイルを埋めて使う（雛形のままなら未確定＝推測で決めない）。デザイン/UI/モーション/コピーの方針判断、見た目や体験のトーン決め、画面・コンポーネント設計の前段で必ず参照する。
UIを「情報設計（優先度/構造）＋インタラクション（状態遷移）＋ビジュアル（トーン）」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化（コンポーネント/トークン）に寄せる。
セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。
Agent Browser（Headlessブラウザ自動化CLI）を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。
| name | keyboard-shortcuts |
| user-invocable | false |
| description | UIキーボードショートカットを「公式基準（W3C APG / WCAG）＋プラットフォーム規約（Apple HIG / Fluent UI）＋デファクトスタンダード（GitHub・Gmail・Slack等）」に沿って設計し、衝突なく・発見しやすく・無効化可能な形で実装するための判断軸。 |
/design-ui / /design-assemble / フロント実装）でインタラクティブ要素を扱うとき、必要に応じて併用する。accessibility-engineer skill と組み合わせて使うことが多い（キーボード操作全般はそちらが基本、このskillはショートカット設計に特化）。? でヘルプ、/ で検索、j/k でリスト移動等）を文脈に応じて採用し、ユーザーの学習コストを下げる。?）・ツールチップ・無効化/リマップ手段を必ず提供する。Escape で必ず脱出可能にする。以下はAPGが定めるウィジェット別の標準キー割り当て。独自実装せず、このパターンに従う。
| ウィジェット | 内部移動 | 主要キー |
|---|---|---|
| Tabs | 左右矢印（水平）/ 上下矢印（垂直） | Home, End, Delete（閉じる） |
| Menu / Menubar | 上下矢印（縦）/ 左右矢印（横） | Enter/Space（実行）, Escape（閉じる） |
| Listbox | 上下矢印 | Home, End, Type-ahead |
| Grid | 上下左右矢印 | PageUp/Down, Ctrl+Home/End |
| Tree View | 上下矢印, 左（折畳）, 右（展開） | Enter（実行）, *（全展開） |
| Dialog (Modal) | Tab（内部循環） | Escape（閉じる）, フォーカストラップ必須 |
| Combobox | 上下矢印（ポップアップ内） | Escape（閉じる）, Enter（選択） |
| Radio Group | 上下/左右矢印 | Space（選択） |
| Toolbar | 左右矢印 | Home, End |
tabindex="0" / 他 tabindex="-1"）または aria-activedescendant を使い分ける。| 機能 | macOS | Windows / Linux |
|---|---|---|
| アプリコマンド | ⌘ Cmd | Ctrl |
| 代替操作 | ⌥ Option | Alt |
| 逆方向/拡張 | ⇧ Shift | Shift |
⌘+Space（Spotlight）, ⌘+Tab（アプリ切替）, ⌘+Q（終了）, ⌘+H（隠す）, ⌘+M（最小化）, Ctrl+F1/Ctrl+F7（キーボードアクセス）Win+L（ロック）, Alt+Tab（切替）, Alt+F4（終了）, Ctrl+Alt+DelCtrl/⌘+T（新規タブ）, Ctrl/⌘+W（タブを閉じる）, Ctrl/⌘+L（アドレスバー）, F5/⌘+R（更新）, Ctrl/⌘+F（ページ内検索）主要サービス（GitHub / Gmail / Slack / X / Notion / VS Code）で共通して定着しているパターン。文脈が合えば積極的に採用する。
| キー | 機能 | 採用例 |
|---|---|---|
? | ショートカットヘルプ一覧を表示 | GitHub, Gmail, X |
/ | 検索バーにフォーカス | GitHub, X, YouTube |
Escape | モーダル/ポップアップ/ドロワーを閉じる | 全サービス共通 |
⌘/Ctrl+K | コマンドパレット / クイックスイッチャー | GitHub, Slack, VS Code, Linear |
| キー | 機能 | 採用例 |
|---|---|---|
j | 次の項目へ移動 | Gmail, X, GitHub |
k | 前の項目へ移動 | Gmail, X, GitHub |
o / Enter | 選択した項目を開く | Gmail, X |
x | 項目を選択/チェック | Gmail |
| キー | 機能 | 採用例 |
|---|---|---|
g → h | ホームへ移動 | X |
g → i | Inbox / Issues へ移動 | Gmail, GitHub |
g → n | 通知へ移動 | X |
g → p | プロフィール / Pull Requests へ移動 | X, GitHub |
| キー | 機能 | 採用例 |
|---|---|---|
n / c | 新規作成（ポスト / メール / Issue） | X (n), Gmail (c) |
r | 返信 | X, Gmail |
l / s | いいね / スター | X (l), Gmail (s) |
keyCode（非推奨）ではなく event.key で判定する。物理配置が重要な場合（ゲーム等）は event.code を使い分ける。参照: W3C UI Events KeyboardEvent key Values⌘ と Windows の Ctrl を同一機能にマッピングする（event.metaKey || event.ctrlKey）。g → i のような2打鍵は、タイムアウト（500〜1000ms）を設け、中間状態を視覚的にフィードバックする。<input>, <textarea>, [contenteditable] にフォーカスがある時はグローバルショートカットを無効化する。j/k パターンの適用判断）⌘/Ctrl+K パターン）? ヘルプ / ツールチップ / ドキュメントの提供方針j/k パターンを採用しているか検討した/ パターンを採用しているか検討した?）を提供したEscape でモーダル/ポップアップが閉じるevent.key を使用している（keyCode 非推奨）<input> / <textarea> にフォーカスがあるのに j/k が発動してリスト移動する。フォーカス対象の判定を怠らない。j/k/n 等の単独文字キーを実装して無効化手段を提供しない。音声入力ユーザーのディクテーション中に誤発動する。⌘+K、同じ機能を Windows で Alt+K にする等、プラットフォーム間で対応がバラバラ。⌘ ↔ Ctrl の対応を守る。navigator.platform（非推奨）に依存する。navigator.userAgentData や feature detection を使う。keyCode / which の使用 — 非推奨でロケール依存の問題がある。event.key を使う。