implementing-ui

UI実装スキル

対象プロジェクトにおけるUI実装の包括的ガイド。

重要: 仕様書の参照

⚠️ UI実装を開始する前に、必ず以下の仕様書を確認すること:

1. REQUIREMENTS.md - 画面の目的・ユースケースを理解
2. TECH_DESIGN.md - 技術設計・型定義、および「画面項目定義」セクション（画面 feature は必須・非画面 feature は省略）の項目詳細・バリデーションルール・表示形式

TECH_DESIGN.md の画面項目定義セクションがある場合:

• フォーム項目名・データ型は定義に従うこと
• バリデーションルールは定義通りに実装すること
• 表示形式（日付フォーマット、通貨など）は定義に従うこと
• 選択肢の値・表示テキストは定義通りに実装すること

Quick Navigation

セクション	トリガーキーワード
管理画面パターン	管理画面、一覧画面、テーブル表示
React Hook Formガイドライン	フォーム、React Hook Form、バリデーション、useForm
レスポンシブデザイン	レスポンシブ、モバイル対応、ブレークポイント、Tailwind

---

管理画面パターン

管理画面アプリ（.stdd.config.yml の該当する apps[]）の一覧管理画面は、以下の統一されたUIパターンを採用すること。

画面構成

┌─────────────────────────────────────────────────────────┐
│ 画面タイトル                       [bg-[#1e3a5f] 濃い青] │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│ 検索条件                               [bg-blue-600 青] │
├─────────────────────────────────────────────────────────┤
│  フィールド1 [________]   フィールド2 [________]        │
│  フィールド3 [▼_______]   フィールド4 [▼_______]        │
│                                    [検索] [リセット]   │
└─────────────────────────────────────────────────────────┘

該当件数: XX件                   [新規登録] [編集] [削除]

┌─────────────────────────────────────────────────────────┐
│ ☐ │カラム1│カラム2│...│              [bg-blue-600 青]  │
├───┼───────┼───────┼───┼──────────────────────────────┤
│ ☐ │       │       │   │                 [白背景]     │
└─────────────────────────────────────────────────────────┘

        [前へ] [1] [2] [3] [次へ]

実装パターン

<div className="space-y-4 w-full">
  {/* ページヘッダー */}
  <div className="bg-[#1e3a5f] text-white px-6 py-4 rounded-t-lg -mx-4 -mt-4 md:-mx-6 md:-mt-6">
    <h1 className="text-xl font-bold">画面タイトル</h1>
  </div>

  {/* 検索条件セクション */}
  <div className="border border-gray-300 rounded-lg overflow-hidden">
    <div className="bg-blue-600 text-white px-4 py-2">
      <span className="font-medium">検索条件</span>
    </div>
    <div className="p-4 bg-white">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        {/* 検索フィールド */}
      </div>
      <div className="flex justify-end gap-2">
        <Button className="bg-blue-600 hover:bg-blue-700">検索</Button>
        <Button variant="outline">リセット</Button>
      </div>
    </div>
  </div>

  {/* 結果セクション */}
  <div className="flex justify-between items-center">
    <div>該当件数: {count}件</div>
    <div className="flex gap-2">{/* アクションボタン */}</div>
  </div>

  {/* テーブル */}
  <div className="border rounded-lg overflow-hidden">
    <table className="w-full min-w-[1000px]">
      <thead className="bg-blue-600 text-white">{/* ヘッダー行 */}</thead>
      <tbody className="bg-white divide-y divide-gray-200">{/* データ行 */}</tbody>
    </table>
  </div>

  {/* ページネーション */}
</div>