Design Detail Skill

Wave B 後に実行される画面詳細設計スキル。 画面詳細仕様、コンポーネントカタログ、エラーパターン、UI テスト戦略を定義する。

実行タイミング: Wave B 後（api, design-inventory 完了後）

前提条件

出力ファイル

依存関係

ワークフロー

1. Blackboard から画面一覧・API を読み込み
2. 共通コンポーネントを抽出
3. コンポーネントカタログを生成
4. エラー表示パターンを定義（NFR ポリシー参照）
5. 各画面の詳細設計を生成（全 SC-ID 分）
6. SC → API トレーサビリティを記録
7. UI テスト戦略を策定
8. SendMessage で contract_outputs を Lead に送信

画面詳細ファイル生成ルール

必須: screen_list.md に定義した全ての SC-ID に対して、 screen_detail_SC-XXX.md を作成すること。

完了条件:

定義済 SC-ID 数 == details/screen_detail_SC-*.md ファイル数

画面詳細テンプレート

# SC-XXX: {画面名}

## 基本情報

| 項目 | 値 |
|------|-----|
| SC-ID | SC-XXX |
| 画面名 | {名前} |
| カテゴリ | {Auth/Member/Admin/...} |
| URL | {パス} |
| 認証 | 必要 / 不要 |
| 関連 FR | FR-XXX, FR-YYY |

## 画面レイアウト

### PC版

+------------------+ | [Header] | +------------------+ | [Main Content] | | ... | +------------------+ | [Footer] | +------------------+

### SP版

+----------+ | [Menu] | +----------+ | [Main] | +----------+

## コンポーネント構成

| コンポーネント | 用途 | Props |
|--------------|------|-------|
| Header | ナビゲーション | user, onLogout |
| UserForm | ユーザー入力 | initialValues, onSubmit |

## 状態管理

| 状態 | 型 | 初期値 | 更新タイミング |
|------|-----|-------|--------------|
| isLoading | boolean | false | API 呼び出し時 |
| error | string | null | エラー発生時 |

## ユーザー操作

| 操作 | アクション | API | 遷移先 |
|------|----------|-----|--------|
| 送信ボタン | submitForm | API-XXX | SC-YYY |
| キャンセル | cancel | - | SC-ZZZ |

## API 連携

| API-ID | メソッド | 用途 |
|--------|---------|------|
| API-001 | GET | データ取得 |
| API-002 | POST | データ登録 |

## エラーハンドリング

| エラー種別 | 表示方法 | メッセージ |
|-----------|---------|-----------|
| 入力エラー | インライン | フィールド横 |
| サーバーエラー | トースト | 再試行を促す |

コンポーネントカタログ

優先度定義

カタログ形式

## Button

### バリエーション
- Primary: 主要アクション
- Secondary: 補助アクション
- Danger: 削除等の危険操作

### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'primary' \| 'secondary' \| 'danger' | 'primary' | スタイル |
| disabled | boolean | false | 無効化 |
| loading | boolean | false | ローディング表示 |

### 使用画面
SC-001, SC-002, SC-005, ...

エラー表示パターン

architecture-detail で定義されたエラー形式（RFC7807 等）に基づき、 UI での表示パターンを定義する。

SendMessage 完了報告

タスク完了時に以下の YAML 形式で Lead に SendMessage を送信する:

status: ok
severity: null
artifacts:
  - docs/06_screen_design/component_catalog.md
  - docs/06_screen_design/error_patterns.md
  - docs/06_screen_design/ui_testing_strategy.md
  - docs/06_screen_design/details/screen_detail_SC-001.md
  # 全 SC-ID 分を列挙
contract_outputs:
  - key: traceability.api_to_sc
    value:
      API-001: [SC-002, SC-003]
  - key: decisions.screens
    value: [画面詳細情報を追加]
open_questions: []
blockers: []

注意: project-context.yaml には直接書き込まない（Aggregator の責務）。

エラーハンドリング