Menu
UIキーボードショートカットを「公式基準（W3C APG / WCAG）＋プラットフォーム規約（Apple HIG / Fluent UI）＋デファクトスタンダード（GitHub・Gmail・Slack等）」に沿って設計し、衝突なく・発見しやすく・無効化可能な形で実装するための判断軸。
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を「情報設計（優先度/構造）＋インタラクション（状態遷移）＋ビジュアル（トーン）」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化（コンポーネント/トークン）に寄せる。
セマンティック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 を使う。