メインコンテンツまでスキップ

UIデザインガイドライン — 必須

このアプリのすべての新規または変更されたUI（Blazorページ、ダイアログ、コンポーネント）のバインディング。 これはCLAUDE.mdで参照される唯一の情報源です。ルールがあなたをブロックしている場合は、停止して質問してください。このルールに違反するUIを出荷しないでください。plans/ui-overhaul.mdに基づいています。

1. モバイルファースト、常に​

  • 360～430pxのスマートフォンを最初に想定して実装し、その後min-widthメディアクエリ/MudBlazorブレークポイント props で拡張してください。max-widthオーバーライドを使用したデスクトップファーストはしないでください。
  • 320～1920pxのすべての幅で横スクロールなし。 コンテンツがビューポートより広い場合は、バグです。
  • タッチターゲット ≥ 44px（var(--app-touch-target)）。テキスト入力 ≥ 16pxフォント（iOsのフォーカス時ズームを防止）。
  • ノッチを尊重してください：env(safe-area-inset-*)を使用してください。ビューポートはすでにviewport-fit=coverを設定しています。
  • prefers-reduced-motionを尊重してください — アニメーションでのみ伝えられた重要な情報はありません。

2. デザイントークン — ハードコードされた値なし​

  • すべての色/半径/間隔はデザイントークンから取得：MudBlazorテーマ（Web/Components/Theme.cs）+ Web/Branding/BrandingCss.csによって生成されるCSSカスタムプロパティ（var(--app-primary)、 --app-surface、--app-border、--app-text*、--app-radiusなど）。
  • コンポーネントまたはCSSルールで16進数の色、半径、またはブランド文字列をハードコードしないでください。 トークンを読んでください。 トークンはホワイトレーベルBrandingOptionsから流れるため、リセラーのパレットはあなたのUIに無料で到達する必要があります。
  • 新しいブランド関連の値 → トークン+ブランディングフィールドを追加してください。インラインでは追加しないでください。

3. レスポンシブレイアウト & データ​

  • テーブルはスマートフォンでカードに折りたたまれます。 すべてのMudTableはBreakpoint="Breakpoint.Sm"を設定し、すべての MudTdにはDataLabelがあります。モバイルに生のワイドテーブルはありません。（テンプレート：Components/Pages/Nodes.razor。）
  • グリッド：MudItem xs="12" sm="6" md="4" — スマートフォンではフル幅、上部では複数列。
  • フォームはモバイルではシングルカラム。大きなタップターゲット。入力にinputmode/autocomplete。数値/小数点 入力モードは金額/パーセンテージ用。
  • 構造化された入力に適切なコントロールを使用してください — 数値やリストのための生のテキストボックスは決してありません。 数値、 金額、パーセンテージ、日付、列挙型、および複数値データを適切なコントロール（MudNumericField、 MudDatePicker、MudSelect、編集可能なタイプ付きフィールドの追加/削除行リスト、またはテーブル）で収集し、各フィールド は個別に検証されます。ユーザーがコンマ/スペース/改行で区切られたblobをタイプしなければならない単一の自由テキストMudTextField — その後あなたがそれを解析します — は禁止です：エラーが発生しやすく、検証されず、スマートフォンで使いにくいです。誰もblobをタイプしたくありません。 複数値入力は、タイプ付き行の編集可能なリスト（追加/削除）、または既存のドメインデータから読み込まれます（例えば、完了したバックテストから直接チェックを実行し、その数値を再入力するのではなく）。プレーンMudTextFieldは、本物の自由テキストのみです — 名前、メモ、検索、説明。
  • すべてのリスト/詳細に読み込み、空、およびエラー状態を提供してください — モバイル用にサイズ設定されています。
  • モバイル下部ナビゲーション（Components/Layout/BottomNav.razor）はプライマリなスマートフォンナビゲーション。グループ化されたドローワーはフルメニュー。高いトラフィック目的地をそこに追加してください。5項目以下を保ってください。

4. ダイアログ（作成/編集）​

  • すべての追加/作成/編集/新規アクションはMudBlazorダイアログ（IDialogService.ShowAsync<TDialog>）を使用し、インラインページフォームは決してありません。ダイアログはWeb/Components/Dialogs/に存在し、[Parameter]を公開し、ネストされた public sealed record …Result(...)を返します。リスト行アクション（開始/停止/削除）はインラインアイコンボタンのままです。
  • スマートフォンでは、ダイアログはフルスクリーン/フル幅であり、キーボード対応である必要があります。

5. インラインヘルプ — すべてのコントロール​

  • すべての非明白なオプション、選択、スイッチ、またはアクションは、<HelpTip Text="…" /> （Components/HelpTip.razor）を取得します — デスクトップでホバー、モバイルでタップ。テキストをdocs/から取得してください。ガイダンスが動作と同期を保つようにしてください。同じコミットで両方を更新してください。

6. ホワイトレーベル​

  • 製品名、ロゴ、説明、サポート/会社、色、ファビコンはすべてBrandingOptionsから取得されます。 それらを参照してください（IBrandingThemeProvider / IOptionsMonitor<AppOptions>）。リテラル「cMind」またはブランド色は決してありません。PWAマニフェスト、アイコン、テーマカラー、およびログインヒーローはすべてブランド化されています。

7. PWA​

  • アプリはインストール可能です。マニフェストエンドポイント（/manifest.webmanifest）をブランド化し、アイコンが存在し （192/512/maskable + apple-touch）、サービスワーカーはアプリシェルのみ（Blazor 回路/_framework/hubsに決して触れない）、およびオフラインページが機能している状態を保ってください。新しい静的ルート → マニフェストscopeを保ってください。
  • Blazor Serverは、ライブなSignalR回路が必要です → インストール可能+アプリシェル、完全なオフラインではありません。オフラインインタラクティビティを約束しないでください。

8. アクセシビリティ​

  • 入力のラベル、カスタムコントロールのaria-*、表示されるフォーカス、論理的なフォーカス順序。テーマはホワイトレーベル化可能であるため、固定パレットではなく、アクティブなテーマに対してコントラストを検証してください。

9. E2E — テストされていないUIは出荷されません（ブロッキング）​

すべてのユーザー向けの変更は、tests/E2ETestsでPlaywrightのE2Eを出荷され、実際のユーザーのように駆動されます。モバイルデバイスエミュレーションおよびデスクトップの場合：

  • 新しいルート → PageSmokeTestsおよびMobileLayoutTests（レンダリング、下部ナビゲーション、エラーUIなし）に追加してください。
  • テーブル/ページを変換 → そのルートをモバイルオーバーフロー無しセットに追加してください。
  • 新しいフロー → 現実的なモバイルジャーニー（作成/編集/保存往復）および不幸なパス （無効な入力、空のリスト、ロール別の許可拒否）。
  • 新しいヘルプチップ → タップで開くことをアサートしてください（HelpTipTestsパターン）。
  • AppFixture.NewAuthedMobilePageAsync / NewAnonymousMobilePageAsync（デバイスエミュレーション）を使用してください。
  • 「完了」の前にdotnet testが緑。エミュレートされたWebKit ≠ モバイルSafari — 実際のデバイスゲーティングは別のリリースステップです。

10. 完了の定義（UI）​

  • モバイルファースト；320～1920pxで横オーバーフロー無し；タッチターゲット ≥44px。
  • デザイントークンのみ — ハードコードされた色/半径/ブランド文字列ゼロ。
  • テーブル → スマートフォンでカード（DataLabel + Breakpoint.Sm）；読み込み/空/エラー状態が存在します。
  • 構造化された入力は、適切な検証されたコントロール（数値/日付/選択/編集可能な行リスト）を使用します — ユーザーが区切られた数値/値blobをタイプする生のテキストボックスはありません。
  • ダイアログを介して作成/編集；モバイルではフルスクリーン。
  • すべてのコントロールに、ドキュメントから取得されたHelpTipがあります。
  • ホワイトレーベル+PWAが尊重されました。
  • モバイル+デスクトップE2Eが追加されました（スモーク、オーバーフロー無し、ジャーニー、不幸なパス）；dotnet testが緑です。
  • Rider get_file_problems + dotnet format analyzersは、タッチしたファイルで一掃されました。