yodogawa 2.0.0 → 2.1.1

package/skills/a-009-define-screen-design/SKILL.md

@@ -1,130 +1,106 @@
----
-name: a-009-define-screen-design
-description: ユーザーストーリーとシナリオから画面一覧を抽出し、画面遷移フローとレスポンシブデザインポリシーを定義するワークフロー
----
-
-# DefineScreenDesign (a-009)
-
-## 目的
-
-- ユーザーストーリーとシナリオを基に、必要な画面を網羅的に抽出する。
-- 各画面の役割、アクセス権限、考慮すべき状態（Empty State含む）を明確化する。
-- 画面遷移フローをMermaid図で可視化し、ユーザーの導線を明確にする。
-- レスポンシブデザインポリシー（ブレークポイント、デバイス対応方針）を定義する。
-
-## 前提
-
-- `docs/project/requirements/05-user-stories.md` が作成されていること。
-- `docs/project/behavior/01-scenarios.md` が作成されていること。
-- `docs/project/design/` ディレクトリが存在すること。
-
-## 手順
-
-### 1. ドキュメントと前提条件の確認
-
-- 必要なドキュメントを読み込む：
-  - `docs/project/requirements/05-user-stories.md`
-  - `docs/project/behavior/01-scenarios.md`
-  - `docs/project/design/01-tech-stack.md` (存在する場合)
-
-- ドキュメントが不足している場合、対応するワークフローの実行を促す。
-
-### 2. テンプレートの準備
-
-- テンプレートをコピーして作業用ファイルを作成する：
-
-  ```bash
-  SCRIPT_DIR=$(for d in .agent .cursor .claude .codex; do [ -d "$d" ] && echo "$d" && break; done)
-  cp "$SCRIPT_DIR/templates/project/04-design/03-screen-design.md" "docs/project/design/03-screen-design.md"
-  ```
-
-### 3. 画面の抽出と提案
-
-- シナリオのGiven/When/Thenステップから、必要な画面を抽出する。
-- 標準的な画面（ログイン、404エラー、設定など）を追加提案する。
-- **画面リスト案を提示**:
-  - 「以下の画面が必要と考えられます：」
-  - 「[画面名] (役割: [説明])」
-
-### 4. 詳細定義と遷移フロー
-
-ユーザーからのフィードバックを受け、以下を定義する。
-
-#### 4.1 各画面の詳細
-
-- 画面ID、名称、URLパス
-- アクセス権限（誰が見れるか）
-- **重要な状態**: 初回訪問(Empty State)、ロード中、エラー時など
-
-#### 4.2 画面遷移フロー
-
-- 主要なユーザーフロー（認証、メイン機能、エラー）をMermaid図で表現する。
-- デッドエンド（戻れない画面）がないか確認する。
-
-### 5. レスポンシブデザインポリシー
-
-- 技術スタック（Tailwind等）に合わせたブレークポイントを定義する。
-- モバイルファーストかデスクトップファーストか、方針を決定する。
-- デバイスごとのレイアウトパターン（ハンバーガーメニュー、ドロワー等）を定義する。
-
-### 6. ドキュメント作成
-
-- `docs/project/design/03-screen-design.md` に決定事項を記入する。
-- **必須項目**:
-  - 画面一覧テーブル
-  - 画面遷移図 (Mermaid)
-  - レスポンシブデザインポリシー
-
-### 7. 完了条件と構造の確認
-
-- 以下の完了条件を満たしているか、コマンドとチェックリストで確認してください：
-
-  1. **構造確認**:
-
-     ```bash
-     # 画面一覧セクションの確認
-     grep "## 画面一覧" docs/project/design/03-screen-design.md && echo "OK" || echo "MISSING: Screen list"
-     # 画面遷移図の確認
-     grep "\`\`\`mermaid" docs/project/design/03-screen-design.md && echo "OK" || echo "MISSING: Flowchart"
-     # レスポンシブポリシーの確認
-     grep "## レスポンシブデザインポリシー" docs/project/design/03-screen-design.md && echo "OK" || echo "MISSING: Responsive policy"
-     ```
-
-  2. **チェックリスト**:
-     - [ ] `docs/project/design/03-screen-design.md` が作成されている
-     - [ ] 主要な画面がすべて網羅されている
-     - [ ] Empty Stateについて考慮されている
-
-### 8. Git への追加（オプション）
-
-- ユーザーに確認：「作成した画面設計ドキュメントを Git に追加しますか？」
-- 「はい」の場合、以下を実行：
-
-  ```bash
-  git add docs/project/design/03-screen-design.md
-  git status
-  ```
-
-- 推奨コミットメッセージ：
-
-  ```
-  docs: 画面設計ドキュメントの作成
-
-  - 画面一覧と遷移フロー(Mermaid)を追加
-  - レスポンシブデザインポリシーを定義
-  ```
-
-## 完了条件
-
-- `docs/project/design/03-screen-design.md` が作成されている。
-- 全画面のリストと役割が定義されている。
-- 画面遷移が可視化されている。
-- レスポンシブ対応方針が明確になっている。
-- ユーザーが内容を承認している。
-
-## エスカレーション
-
-- シナリオ不足で画面が特定できない場合：
-  - 「シナリオが不足しています。`CreateScenarios` (a-003) に戻ってユーザーフローを明確にしましょう。」と提案する。
-- 画面数が多すぎる場合：
-  - 「初期リリースには多すぎる可能性があります。MVPに必要な画面に絞り込みませんか？」と提案する。
+---
+name: a-009-define-screen-design
+description: ユーザーストーリーとシナリオから画面一覧・遷移フロー・レスポンシブポリシーを定義する。技術選定後、UI/UX 設計を開始する際に使用。
+disable-model-invocation: true
+allowed-tools: Read, Write, Edit, Bash, Grep, Glob
+---
+
+# DefineScreenDesign (a-009)
+
+## 目的
+
+- ユーザーストーリーとシナリオを基に、必要な画面を網羅的に抽出する。
+- 各画面の役割、アクセス権限、考慮すべき状態（Empty State 含む）を明確化する。
+- 画面遷移フローを Mermaid 図で可視化し、ユーザーの導線を明確にする。
+- レスポンシブデザインポリシー（ブレークポイント、デバイス対応方針）を定義する。
+
+## 前提
+
+- `docs/project/01-requirements/05-user-stories.md` が作成されていること。
+- `docs/project/02-behavior/01-scenarios.md` が作成されていること。
+- `docs/project/04-design/` ディレクトリが存在すること。
+
+## 手順
+
+### 1. ドキュメントと前提条件の確認
+
+以下を読み込む:
+
+- `docs/project/01-requirements/05-user-stories.md`
+- `docs/project/02-behavior/01-scenarios.md`
+- `docs/project/04-design/01-tech-stack.md`（存在する場合）
+
+不足があれば対応スキル（`/a-002`, `/a-003`, `/a-007`）の実行を促す。
+
+### 2. テンプレートの準備
+
+```bash
+SCRIPT_DIR=$(for d in .claude .agents; do [ -d "$d" ] && echo "$d" && break; done)
+cp "$SCRIPT_DIR/templates/project/04-design/03-screen-design.md" "docs/project/04-design/03-screen-design.md"
+```
+
+### 3. 画面の抽出と提案
+
+- シナリオの Given/When/Then から必要な画面を抽出。
+- 標準画面（ログイン、404、設定等）を追加提案。
+- 「[画面名] (役割: [説明])」の形式で一覧化。
+
+画面一覧のテーブル例は [examples/screen-templates.md](examples/screen-templates.md#画面一覧テーブル) を参照。
+
+### 4. 詳細定義と遷移フロー
+
+#### 4.1 各画面の詳細
+
+画面 ID、名称、URL パス、アクセス権限、重要な状態（Empty / Loading / Error / Success）。状態観点は [examples/screen-templates.md](examples/screen-templates.md#重要な状態の観点) を参照。
+
+#### 4.2 画面遷移フロー
+
+主要なユーザーフロー（認証、メイン機能、エラー）を Mermaid 図で表現する。デッドエンドがないか確認する。記述例は [examples/screen-templates.md](examples/screen-templates.md#画面遷移図mermaid) を参照。
+
+### 5. レスポンシブデザインポリシー
+
+技術スタック（Tailwind 等）に合わせたブレークポイントと方針を定義する。ブレークポイント表と方針例は [examples/screen-templates.md](examples/screen-templates.md#レスポンシブデザインポリシー) を参照。
+
+### 6. ドキュメント作成
+
+`docs/project/04-design/03-screen-design.md` に以下を記入する:
+
+- 画面一覧テーブル
+- 画面遷移図（Mermaid）
+- レスポンシブデザインポリシー
+
+### 7. 構造チェック
+
+```bash
+grep "## 画面一覧" docs/project/04-design/03-screen-design.md \
+  && grep "\`\`\`mermaid" docs/project/04-design/03-screen-design.md \
+  && grep "## レスポンシブデザインポリシー" docs/project/04-design/03-screen-design.md \
+  && echo "OK" || echo "MISSING SECTION"
+```
+
+詳細チェックリストは [reference/structure-check.md](reference/structure-check.md#チェックリスト) を参照。
+
+### 8. Git への追加（任意）
+
+```bash
+git add docs/project/04-design/03-screen-design.md
+git commit -m "docs: 画面設計ドキュメントの作成"
+```
+
+## 完了条件
+
+- `docs/project/04-design/03-screen-design.md` が作成されている。
+- 全画面のリストと役割が定義されている。
+- 画面遷移が可視化されている。
+- レスポンシブ対応方針が明確になっている。
+- ユーザーが内容を承認している。
+
+## エスカレーション
+
+- **シナリオ不足で画面が特定できない**: 「`/a-003-create-scenarios` に戻ってユーザーフローを明確にしましょう。」
+- **画面数が多すぎる**: 「初期リリースには多すぎる可能性があります。MVP に必要な画面に絞り込みませんか？」
+
+## 参考
+
+- [examples/screen-templates.md](examples/screen-templates.md) — 画面一覧テーブル、状態観点、Mermaid 遷移図、レスポンシブ方針
+- [reference/structure-check.md](reference/structure-check.md) — 構造確認コマンド、チェックリスト、レビュー質問、Git 追加例

package/skills/a-009-define-screen-design/examples/screen-templates.md

@@ -0,0 +1,66 @@
+# 画面定義と遷移図テンプレート
+
+SKILL.md 手順3〜5 で使用する画面一覧・遷移図・レスポンシブ方針のテンプレート。
+
+## 画面一覧テーブル
+
+| 画面ID | 名称 | URL | アクセス権限 | 主な状態 |
+|:--|:--|:--|:--|:--|
+| SCR-001 | ログイン | `/login` | 未認証 | 入力・認証中・エラー |
+| SCR-002 | ダッシュボード | `/` | 認証済み | 初回（Empty）・通常・ロード中 |
+| SCR-003 | 注文一覧 | `/orders` | 認証済み | 0件・一覧・ページング |
+| SCR-004 | 注文詳細 | `/orders/:id` | 認証済み・本人 | 通常・取消済み・エラー |
+| SCR-005 | 設定 | `/settings` | 認証済み | タブ別 |
+| SCR-999 | 404 | `/*` | 全員 | デフォルト |
+
+## 重要な状態の観点
+
+- **Empty State**: データが 0 件、初回訪問時
+- **Loading State**: 非同期取得中
+- **Error State**: 取得失敗、権限不足、タイムアウト
+- **Success State**: 操作成功後のフィードバック
+
+## 画面遷移図（Mermaid）
+
+```mermaid
+flowchart LR
+  Login[ログイン] --> Dashboard[ダッシュボード]
+  Dashboard --> OrderList[注文一覧]
+  OrderList --> OrderDetail[注文詳細]
+  Dashboard --> Settings[設定]
+  OrderDetail --> OrderList
+  Login -.認証失敗.-> Login
+  Any((全画面)) -.未認証.-> Login
+  Any -.未定義URL.-> NotFound[404]
+```
+
+- デッドエンド（戻れない画面）がないか確認する。
+- エラーや未認証時のリダイレクト先を明示する。
+
+## レスポンシブデザインポリシー
+
+### ブレークポイント（Tailwind 基準）
+
+| 名称 | 幅 | 主な対象 |
+|:--|:--|:--|
+| sm | 640px〜 | モバイル横 |
+| md | 768px〜 | タブレット縦 |
+| lg | 1024px〜 | タブレット横・小型ノート |
+| xl | 1280px〜 | デスクトップ |
+| 2xl | 1536px〜 | 大型ディスプレイ |
+
+### 方針
+
+- **モバイルファースト**で設計する（Tailwind のデフォルト）
+- メニュー: モバイル=ハンバーガー / デスクトップ=サイドバー
+- データテーブル: モバイル=カードレイアウト / デスクトップ=テーブル
+- モーダル: モバイル=フルスクリーン / デスクトップ=中央配置
+
+## コミットメッセージ例
+
+```text
+docs: 画面設計ドキュメントの作成
+
+- 画面一覧と遷移フロー（Mermaid）を追加
+- レスポンシブデザインポリシーを定義
+```

package/skills/a-009-define-screen-design/reference/structure-check.md

@@ -0,0 +1,47 @@
+# 構造チェックとレビュー観点
+
+SKILL.md 手順7〜8 で使う確認コマンドとレビュー観点。
+
+## セクション存在確認
+
+```bash
+# 画面一覧セクションの確認
+grep "## 画面一覧" docs/project/04-design/03-screen-design.md && echo "OK" || echo "MISSING: Screen list"
+# 画面遷移図の確認
+grep "\`\`\`mermaid" docs/project/04-design/03-screen-design.md && echo "OK" || echo "MISSING: Flowchart"
+# レスポンシブポリシーの確認
+grep "## レスポンシブデザインポリシー" docs/project/04-design/03-screen-design.md && echo "OK" || echo "MISSING: Responsive policy"
+```
+
+## チェックリスト
+
+- [ ] `docs/project/04-design/03-screen-design.md` が作成されている
+- [ ] 主要な画面がすべて網羅されている
+- [ ] 各画面の URL パスとアクセス権限が定義されている
+- [ ] Empty State / Loading / Error の各状態が考慮されている
+- [ ] 画面遷移図にデッドエンドがない
+- [ ] 認証失敗時・404 等のエラー導線が定義されている
+- [ ] レスポンシブのブレークポイントと方針（モバイルファースト等）が定まっている
+
+## レビュー確認質問
+
+- 「ユーザーストーリーを完遂するのに必要な画面がすべて揃っていますか？」
+- 「初回訪問時の Empty State は適切にハンドリングされますか？」
+- 「権限のないユーザーが迷い込まない導線になっていますか？」
+- 「MVP スコープと将来拡張が区別されていますか？」
+
+## Git への追加（任意）
+
+```bash
+git add docs/project/04-design/03-screen-design.md
+git status
+```
+
+推奨コミットメッセージ:
+
+```text
+docs: 画面設計ドキュメントの作成
+
+- 画面一覧と遷移フロー（Mermaid）を追加
+- レスポンシブデザインポリシーを定義
+```