name: screen-transition-diagram
description: 画面遷移図(画面フロー図 / Screen flow / UI flow / Wireflow)を、要件・ユーザーストーリー・既存ルート・Figma構成・文章仕様から再現可能に作成/更新する。出力はMermaidのflowchartを基本とし、画面カタログ(画面ID/名称/状態/権限)と遷移カタログ(トリガー/条件/結果/例外)も併記する。例外系(失敗・戻り・未ログイン・権限不足・空状態)を必ず含め、スパゲッティ化する場合はユースケース単位で図を分割(L0/L1/L2)する。トリガー語: 画面遷移図, 画面フロー, UIフロー, screen flow, wireflow, 遷移図, フロー図, 画面一覧, 画面設計, 導線
Screen Transition Diagram Skill
このSkillは、Web/アプリの「画面(ページ)」をノード、ユーザー操作や条件を矢印として、実装/QAに耐える画面遷移図を作るための手順です。
Output Contract(必ずこの形で返す)
- スコープ/粒度宣言(A/B/Cのどれか + ユースケース範囲 + レベル)
- 前提(Assumptions)(不明点は仮置きして明示)
- 画面カタログ(表):
ScreenID / 画面名 / 役割 / 状態(空・エラー等) / 入口or出口 / ルート(任意)
- 遷移カタログ(表):
From / To / トリガー / 条件 / 結果(成功・失敗) / 備考
- Mermaid(flowchart):図(必要ならL0/L1/L2で複数)
- レビュー用チェックリスト(resources/checklist_review.md をベースに)
- 未確定事項(Questions):次に埋めるべき確認事項
粒度の選び方(最初に決める)
- A. 情報設計寄り:画面名+遷移が中心(注釈最小)
- B. 仕様寄り:ログイン状態/権限/バリデーション/エラー/空状態まで記載
- C. デザイン寄り(Wireflow):画面の簡易ワイヤー相当の注釈(Figma Frame参照など)を追加
ユーザーから粒度指定がない場合は、**まずB(仕様寄り)**で作り、過剰ならAに落とす。
手順(再現可能な作り方)
0) 最小インプットの確保
ユーザー入力が足りない場合は resources/template_minimum_input.md をそのまま貼って埋めてもらう。
ただし「今すぐ作って」が強い場合は、仮置き前提で作成→未確定事項に回す(質問だけで止めない)。
1) ユースケースで分割(スパゲッティ回避)
- まず L0: 全体(入口→主要ハブ→出口)
- 次に L1: 機能/フロー別(例:ログイン、作成、購入、設定)
- 必要なら L2: 詳細(例外/分岐/状態)
図が読めない密度になったら、迷わず分割する。
2) 画面の洗い出し → 画面ID採番
- 画面IDは
S-010 のように 10刻み(あとで差し込みやすい)
- 同じ画面の「別状態」は増殖させすぎない
- 例:一覧の空状態は
状態 列と注釈で表す(必要なら分ける)
3) 主経路(Happy Path)を先に繋ぐ
入口(Entry)→ゴール(Goal)を最短で繋いだ図をまず完成させる。
4) 例外系・戻り導線を追加(必須)
最低限これを入れる:
- ログイン失敗
- 権限不足
- バリデーションNG
- 通信失敗/タイムアウト
- 空状態(データなし)
- 戻る/キャンセル/閉じる
5) 矢印ラベルを埋める(解釈割れ防止)
矢印ラベルは原則この形式:
操作 / 条件 / 結果
例:保存 / バリデーションOK / 詳細へ保存 / NG(必須未入力) / エラー表示して同画面
6) Mermaid化(表→図の順が崩れにくい)
まず「画面カタログ」「遷移カタログ」を作り、そこからMermaidへ落とす。
Mermaid表記ルール(推奨)
- ノード表示:
S-010: 画面名
- 分岐:
{}(例:確認ダイアログ、権限分岐)
- ループ:失敗時は同画面に戻す矢印を明示
- 役割が複数:
subgraph でスイムレーン風に分ける(必要時のみ)
Mermaidテンプレ(単一フロー)
flowchart LR
S010[S-010: Entry] -->|操作 / 条件 / 結果| S020[S-020: Next]
S020 -->|失敗: 理由| S020
S020 -->|成功| S030[S-030: Goal]
Mermaidテンプレ(役割別レーン)
flowchart LR
subgraph User["Role: User"]
U010[S-010: ...]
end
subgraph Admin["Role: Admin"]
A010[S-110: ...]
end
U010 -->|申請| A010
既存仕様の更新(差分最小)
ユーザーが「修正して」「追加して」と言ったら:
- 変更点の要約(箇条書き)
- 画面/遷移カタログの差分
- Mermaidの差分(該当部分のみ再掲)
の順で出す。
Examples(発動例)
Example 1: ゼロから作る
User: 「投稿フローの画面遷移図を作って。未ログインはログインへ。下書き保存あり。」
Assistant (you):
- 粒度Bで宣言 → 画面カタログ/遷移カタログ → Mermaid(Happy→例外→戻り)→未確定事項
Example 2: 複雑なので分割
User: 「購入・配送・返品まで全部の遷移を1枚で」
Assistant (you):
- L0全体 + L1(購入/配送/返品)に分割してMermaidを複数出す(スパゲッティ回避)
Example 3: 既存Mermaidの更新
User: 「このMermaidに『権限不足』を追加して」
Assistant (you):
- 差分方針 → 追加ノード/矢印 → 変更箇所だけのMermaid再掲
Linked Resources(必要時だけ読む:progressive disclosure)
