UI/UX プレイブック
優れたインターフェースは、明確な視点（誰に、どんな仕事、どんな感触）、一貫したシステム（トークン + コンポーネント）、そして数多くの正しい細部（状態、モーション、アクセシビリティ、コピー）の3つが組み合わさって生まれます。このプレイブックは、各部分をカバーするスキル群を統率します。
あらゆるUIタスクのためのワークフロー
スケールに応じて調整：ボタンの微調整はステップ5〜7で十分、新しいアプリでは全てのステップが必要です。
- ブリーフ — 誰のためのものか、ジョブ（動詞）、どんなコンテキスト／デバイスか、どんな感触を与えるべきか（具体的な言葉）。コードベースとリクエストから推測し、重要な制約が不明な場合にのみ1つの質問をする（プラットフォーム、既存のブランド、オーディエンス）。
- 方向性 — コードの前に美的・インタラクションの性格を決める。この画面タイプについて実際の参考例を2〜4つ見る（
ui-stack-advisor/references/inspiration.md）。 - システム — トークンとDESIGN.md（
design-system-builder；カラーはcolor-theory経由）。既存プロジェクト？そのシステムを読み、それに従い、拡張する。フォークしない。 - スタック — コンポーネント／モーションライブラリ（
ui-stack-advisor）。アクセシブルなプリミティブを使用し、ダイアログ、メニュー、コンボボックス、日付ピッカー、トーストを手作りしない。 - 構築 — 構造と階層（レイアウト、タイポグラフィ、スペーシング）を優先し、次に色、その次に細部。ダミーテキストではなく実際のコンテンツ。すべての状態：ローディング、空、エラー、部分、成功、無効、長文コンテンツ。
- モーション — 目的（フィードバック、連続性、状態変化）がある場合のみ。モーションスキルを参照。
- 見て検証する — レンダリングする（開発サーバー + Playwright/Chrome MCP/シミュレータ）、実サイズ（390、768、1280+；小型電話、タブレット）で確認、両テーマ、キーボードのみ、200%ズーム／最大ダイナミックタイプ。見つけた問題を一括修正。
- レビュー — 以下の出荷前チェックリストまたはレビュースキルを実行する。
どのスキルを何に使うか（ルーティング）
| 必要なもの | ロードするスキル |
|---|---|
| ランディングページ、マーケティング、差別化されたビジュアルデザインの美的方向性 | frontend-design |
| プロダクトUI（ダッシュボード、SaaS、管理画面、ツール）と持続的なデザインメモリ | interface-design |
| デザインシステム、トークン、テーマ、マルチプラットフォームトークン、DESIGN.md | design-system-builder |
| 色の選択・導出、パレット、ダークモード色、コントラスト、色覚障害対応 | color-theory（生成）・better-colors（監査） |
| タイポグラフィ：スケール、折り返し、フォント機能、切り詰め | better-typography |
| レイアウト：グループ化、配置、レスポンシブ、国際化対応スペース | better-layout |
| 仕上げ：角丸、シャドウ、アイコン、光学的配置 | better-ui |
| アクセシビリティレビュー・修正（WCAG 2.2） | better-accessibility |
| UXコピー、ラベル、エラーメッセージ、空状態 | better-writing |
| 上記すべてにわたる全画面ランク付けレビュー | better-interface・ブランチ/PRレビュー：interface-review |
| コンポーネント／アニメーション／ウィジェットライブラリの選択 | ui-stack-advisor |
| アニメーション哲学、イージング、持続時間、スプリング、コンポーネントの感触 | emil-design-eng |
| Webアニメーションの構築 | animate・複数要素の連携：choreograph |
| ガタガタのアニメーションのレビュー・監査・修正 | review-animations・improve-animations・animation-performance |
| Appleスタイルの流れるようなモーション、ジェスチャー、マテリアル（Webまたはネイティブ） | apple-design |
| モバイルWebをネイティブのように（PWA、タッチ、100vh、セーフエリア） | mobile-native |
| React Native / Expoのデザインとレビュー | mobile-design・アニメーション：animate-expo・Expoプラグインスキル：expo-native-ui、expo-ui、expo-design-system、expo-animation、expo-router |
| shadcn/ui固有 | shadcn（Vercelプラグイン） |
| コンポーネントバリアント／ステートギャラリー／ストレステスト | variant・state-machine・break（ユーザー起動） |
| チャートとダッシュボードのデータ可視化 | dataviz |
| Figma ↔ コード | Figma MCPスキル（figma-design-to-code、figma-generate-library、…） |
競合ルール：2つのスキルが矛盾する場合、プロジェクトの既存のDESIGN.md／システムが優先され、次にユーザーのブリーフ、その次に専門スキル（例：Expoアプリではanimate-expoがemil-design-engより優先）が優先される。1つのタスクに複数の美的方向性スキルを重ねない——1つを選ぶ（frontend-design または interface-design）。
クイックリファレンス（標準）
アクセシビリティ（WCAG 2.2 AA — 米国（ADA/508）、EU（欧州アクセシビリティ法、2025年6月施行）、その他多くの地域で法的ベースライン）
- コントラスト：テキスト4.5:1、大テキストおよびUIコンポーネント／意味のあるグラフィックは3:1
- すべてをキーボードで操作可能；可視フォーカス（2.4.7）がスティッキーUIで隠されない（2.4.11）；論理的な順序
- ターゲットサイズ ≥ 24×24 CSS px（2.5.8）——44×44を想定してデザイン
- ドラッグには単一ポインタの代替手段がある（2.5.7）
- すべての入力にラベル、エラーはテキストで特定、色のみで情報を伝えない
- テキストは200%にリサイズ／320px幅で横スクロールなしにリフロー（1.4.10）
prefers-reduced-motionを尊重、3/s以上の点滅なし、5秒以上の自動移動コンテンツは一時停止可能- 一貫したヘルプの場所（3.2.6）、不要な再入力なし（3.3.7）、認証はアクセシブルに——認知テストなし、パスワードマネージャー／ペースト許可（3.3.8）
- セマンティックHTMLが最優先；ARIAは隙間を埋める場合のみ。ネイティブ：アクセシビリティラベル／トレイト（iOS）、contentDescription／semantics（Android / Compose）、
accessibilityLabel／accessibilityRole（RN）
プラットフォーム
- iOS（HIG）：44×44ptのターゲット、トップレベルナビゲーション（≤5）にはタブバー、スワイプバック付きナビゲーションスタック、ディテント付きシート、SF Symbols、Dynamic Type、セマンティックカラー、コントロールレイヤー（iOS 26+）にはLiquid Glass、意味のあるイベントには触覚フィードバック
- Android（Material 3 / Expressive）：48×48dpのターゲット、幅クラスによるナビゲーションバー／レール／ドロワー、予測的戻る、インセット付きエッジツーエッジ、ダイナミックカラー、M3タイプスケール
- 詳細と違い：
references/mobile-standards.md
パフォーマンス（Core Web Vitals、75パーセンタイル）：LCP ≤ 2.5s · INP ≤ 200ms · CLS ≤ 0.1。入力には約100ms以内に応答、400ms以上（Dohertyしきい値）の処理には進捗表示、コンテンツにはスケルトン、アクションにはスピナー、安全な場合は楽観的UI。モバイル：60/120fps、JSスレッドを解放（Reanimated worklets）、リストは仮想化。
UX原則：Nielsenの10のヒューリスティクス + Laws of UX（Fitts、Hick、Jakob、Miller/チャンキング、Tesler、Doherty、ピークエンド、美的ユーザビリティ、Von Restorff、ゲシュタルト）。フォーム、ナビゲーション、検索、テーブル、オンボーディング、空／エラー／ローディング状態、通知、設定、破壊的アクションのパターンガイダンス：references/ux-principles-and-patterns.md
倫理：ダークパターン（確信迫り、退出困難なキャンセル、事前チェックされた同意、偽の緊急性、隠れたコスト、しつこいポップアップ）はなし。これらはますます違法化（EU DSA/DMA、FTC click-to-cancelルール、GDPR同意ルール）されており、信頼を損なう。
出荷前UIチェックリスト
- 各画面の目的が5秒で明らか；ビューごとに1つのプライマリアクション
- 目を細めて階層が読める（サイズ／ウェイト／コントラスト、色だけに頼らない）
- スペーシング、角丸、タイプ、色はトークンのみから；DESIGN.mdと一貫
- ローディング、空、エラー、部分、オフライン、長文コンテンツの状態がデザインされている
- フォーム：ラベル、正しい入力タイプ／オートコンプリート、インラインエラー、エラー時に入力保持、ペーストブロックなし
- キーボード：タブ順序、可視フォーカス、Escapeでオーバーレイを閉じる、フォーカスがトリガーに戻る
- スクリーンリーダー：名前／ロール／状態、非同期更新用のライブリージョン、見出し構造
- 両テーマでコントラストを測定；色のみで伝える情報がない
- 320 / 390 / 768 / 1024 / 1440でレスポンシブ；タッチターゲット ≥ 44；ホバー限定の操作はなし
- モーションは目的があり、UIは300ms以内、割り込み可能、
prefers-reduced-motionを尊重 - コピー：ボタンには具体的な動詞、エラーは修正方法を説明、一貫した用語、i18n対応（文字列連結なし、+30〜40%のテキスト拡張余地、RTLセーフな論理プロパティ）
- パフォーマンス：画像はサイズ調整／遅延ロード、フォントはプリロード／スワップ、レイアウトシフトなし、長いリストは仮想化
- レンダリング結果を確認（実際のサイズのスクリーンショット）、コードだけではない
完全なルールセットによるWebコード監査（フォーカス、フォーム、アニメーション、タイポグラフィ、コンテンツ、画像、パフォーマンス、ナビゲーション、タッチ、テーマ、i18n、ハイドレーション、コピー、アンチパターン）：references/web-interface-guidelines.md を読み、file:line - 問題 の形式で報告する。
参考文献
references/web-interface-guidelines.md— VercelのWebインターフェースガイドライン（ベンダリング、MIT）コード監査用references/ux-principles-and-patterns.md— ヒューリスティクス、Laws of UX、パターンレベルのベストプラクティスreferences/mobile-standards.md— iOS HIG + Material 3の要点とプラットフォーム間の違いreferences/arsenal.md— インストールされているすべてのUIスキル：ソース、ライセンス、用途、更新方法；オプションの追加