Screen Transition Diagram Skill

このSkillは、Web/アプリの「画面(ページ)」をノード、ユーザー操作や条件を矢印として、実装/QAに耐える画面遷移図を作るための手順です。

Output Contract(必ずこの形で返す)

1. スコープ/粒度宣言(A/B/Cのどれか + ユースケース範囲 + レベル)
2. 前提(Assumptions)(不明点は仮置きして明示)
3. 画面カタログ(表):ScreenID / 画面名 / 役割 / 状態(空・エラー等) / 入口or出口 / ルート(任意)
4. 遷移カタログ(表):From / To / トリガー / 条件 / 結果(成功・失敗) / 備考
5. Mermaid(flowchart):図(必要ならL0/L1/L2で複数)
6. レビュー用チェックリスト(resources/checklist_review.md をベースに)
7. 未確定事項(Questions):次に埋めるべき確認事項

粒度の選び方(最初に決める)

• A. 情報設計寄り:画面名+遷移が中心(注釈最小)
• B. 仕様寄り:ログイン状態/権限/バリデーション/エラー/空状態まで記載
• C. デザイン寄り(Wireflow):画面の簡易ワイヤー相当の注釈(Figma Frame参照など)を追加