yodogawa 2.0.0 → 2.1.0

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/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"
+```
+
+## チェックリスト
+
+- [ ] `docs/project/design/03-screen-design.md` が作成されている
+- [ ] 主要な画面がすべて網羅されている
+- [ ] 各画面の URL パスとアクセス権限が定義されている
+- [ ] Empty State / Loading / Error の各状態が考慮されている
+- [ ] 画面遷移図にデッドエンドがない
+- [ ] 認証失敗時・404 等のエラー導線が定義されている
+- [ ] レスポンシブのブレークポイントと方針（モバイルファースト等）が定まっている
+
+## レビュー確認質問
+
+- 「ユーザーストーリーを完遂するのに必要な画面がすべて揃っていますか？」
+- 「初回訪問時の Empty State は適切にハンドリングされますか？」
+- 「権限のないユーザーが迷い込まない導線になっていますか？」
+- 「MVP スコープと将来拡張が区別されていますか？」
+
+## Git への追加（任意）
+
+```bash
+git add docs/project/design/03-screen-design.md
+git status
+```
+
+推奨コミットメッセージ:
+
+```text
+docs: 画面設計ドキュメントの作成
+
+- 画面一覧と遷移フロー（Mermaid）を追加
+- レスポンシブデザインポリシーを定義
+```

package/skills/a-010-define-design-system/SKILL.md

@@ -1,212 +1,134 @@
----
-name: a-010-define-design-system
-description: プロジェクトのデザインシステム（カラー、タイポグラフィ、スペーシング、コンポーネントスタイル）を定義するワークフロー
----
-
-# DefineDesignSystem (a-010)
-
-## 目的
-
-- プロジェクト全体で一貫したビジュアルデザインを実現するためのデザインシステムを定義する。
-- カラーパレット、タイポグラフィ、スペーシング、コンポーネントスタイルを標準化する。
-- デザイナーと開発者が共通言語として使える仕様書を作成する。
-
-## 前提
-
-- `docs/project/design/03-screen-design.md` が作成されていること（画面設計が完了していること）。
-- `docs/project/design/01-tech-stack.md` が作成されていること（使用するUIフレームワークが決定していること）。
-
-## 手順
-
-### 1. 既存ドキュメントの確認
-
-- 以下のドキュメントを読み込む：
-  - `docs/project/design/01-tech-stack.md` - 使用するCSSフレームワーク（Tailwind, MUI等）
-  - `docs/project/design/03-screen-design.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/04-design-system.md" "docs/project/design/04-design-system.md"
-  ```
-
-### 3. カラーパレットの定義
-
-- **Primary Colors**: ブランドカラー（1〜2色）
-- **Secondary Colors**: アクセントカラー
-- **Semantic Colors**: Success, Warning, Error, Info
-- **Neutral Colors**: グレースケール（背景、テキスト、ボーダー）
-- **Dark Mode対応**: 必要に応じてダークテーマのカラーも定義
-
-#### 出力例
-
-```css
-:root {
-  /* Primary */
-  --color-primary-50: #eff6ff;
-  --color-primary-500: #3b82f6;
-  --color-primary-900: #1e3a8a;
-
-  /* Semantic */
-  --color-success: #22c55e;
-  --color-warning: #f59e0b;
-  --color-error: #ef4444;
-  --color-info: #0ea5e9;
-
-  /* Neutral */
-  --color-gray-50: #f9fafb;
-  --color-gray-500: #6b7280;
-  --color-gray-900: #111827;
-}
-```
-
-### 4. タイポグラフィの定義
-
-- **フォントファミリー**: 見出し用、本文用、コード用
-- **フォントサイズスケール**: xs, sm, base, lg, xl, 2xl, 3xl, 4xl
-- **行間（Line Height）**: tight, normal, relaxed
-- **フォントウェイト**: normal, medium, semibold, bold
-
-#### 出力例
-
-```css
-:root {
-  /* Font Family */
-  --font-sans: "Inter", "Noto Sans JP", sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
-
-  /* Font Size */
-  --text-xs: 0.75rem; /* 12px */
-  --text-sm: 0.875rem; /* 14px */
-  --text-base: 1rem; /* 16px */
-  --text-lg: 1.125rem; /* 18px */
-  --text-xl: 1.25rem; /* 20px */
-  --text-2xl: 1.5rem; /* 24px */
-  --text-3xl: 1.875rem; /* 30px */
-  --text-4xl: 2.25rem; /* 36px */
-}
-```
-
-### 5. スペーシングシステムの定義
-
-- **基本単位**: 4px または 8px ベース
-- **スケール**: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64
-- **用途**: margin, padding, gap
-
-#### 出力例
-
-```css
-:root {
-  --space-0: 0;
-  --space-1: 0.25rem; /* 4px */
-  --space-2: 0.5rem; /* 8px */
-  --space-3: 0.75rem; /* 12px */
-  --space-4: 1rem; /* 16px */
-  --space-6: 1.5rem; /* 24px */
-  --space-8: 2rem; /* 32px */
-  --space-12: 3rem; /* 48px */
-  --space-16: 4rem; /* 64px */
-}
-```
-
-### 6. コンポーネントスタイルの定義
-
-以下のコンポーネントについて、バリアント（種類）とステート（状態）を定義する：
-
-#### 6.1 ボタン
-
-- **バリアント**: Primary, Secondary, Outline, Ghost, Danger
-- **サイズ**: sm, md, lg
-- **ステート**: Default, Hover, Active, Disabled, Loading
-
-#### 6.2 フォーム要素
-
-- Input, Textarea, Select, Checkbox, Radio
-- **ステート**: Default, Focus, Error, Disabled
-
-#### 6.3 カード / コンテナ
-
-- 角丸（border-radius）、シャドウ、パディング
-
-#### 6.4 その他
-
-- Badge, Tag, Avatar, Tooltip, Modal
-
-### 7. アイコン・イラストガイドライン
-
-- **アイコンライブラリ**: Lucide, Heroicons, Material Icons など
-- **サイズ規定**: sm(16px), md(20px), lg(24px), xl(32px)
-- **スタイル**: Outline / Filled の統一
-
-### 8. アニメーション・トランジション
-
-- **Duration**: fast(150ms), normal(300ms), slow(500ms)
-- **Easing**: ease-in-out をデフォルトに
-- **使用箇所**: hover, focus, モーダル開閉, ページ遷移
-
-#### 出力例
-
-```css
-:root {
-  --transition-fast: 150ms ease-in-out;
-  --transition-normal: 300ms ease-in-out;
-  --transition-slow: 500ms ease-in-out;
-}
-```
-
-### 9. ドキュメント作成
-
-- `docs/project/design/04-design-system.md` を作成する。
-- **必須セクション**:
-  - カラーパレット
-  - タイポグラフィ
-  - スペーシング
-  - コンポーネントスタイル（主要なもの）
-
-### 10. 完了条件の確認
-
-- 以下のチェックリストで確認：
-  - [ ] `docs/project/design/04-design-system.md` が作成されている
-  - [ ] カラーパレットが定義されている
-  - [ ] タイポグラフィスケールが定義されている
-  - [ ] スペーシングシステムが定義されている
-  - [ ] 主要コンポーネント（ボタン、フォーム）のスタイルが定義されている
-
-### 11. Git への追加（オプション）
-
-- ユーザーに確認：「作成したデザインシステムドキュメントを Git に追加しますか？」
-- 「はい」の場合：
-
-  ```bash
-  git add docs/project/design/04-design-system.md
-  git status
-  ```
-
-- 推奨コミットメッセージ：
-
-  ```
-  docs: デザインシステムの定義
-
-  - カラーパレット、タイポグラフィ、スペーシングを定義
-  - 主要コンポーネントのスタイルガイドを追加
-  ```
-
-## 完了条件
-
-- `docs/project/design/04-design-system.md` が作成されている。
-- カラーパレット、タイポグラフィ、スペーシングが定義されている。
-- 主要コンポーネントのスタイルが定義されている。
-- ユーザーが内容を承認している。
-
-## エスカレーション
-
-- ブランドガイドラインが存在しない場合：
-  - 「ブランドカラーやフォントの指定がありますか？なければ汎用的なパレットを提案します。」と確認する。
-- 使用するCSSフレームワークが未定の場合：
-  - 「TailwindやMUIなど、使用するフレームワークが決まっていると、そのデザイントークンに合わせた定義ができます。`DefineTechStack` (a-007) で技術スタックを決定しましょう。」と提案する。
-- コンポーネントが多すぎる場合：
-  - 「まずは主要なコンポーネント（ボタン、フォーム、カード）から始めて、必要に応じて拡張しましょう。」と提案する。
+---
+name: a-010-define-design-system
+description: カラー・タイポグラフィ・スペーシング・コンポーネントスタイルを含むデザインシステムを定義する。画面設計後、UI 実装のスタイル基盤を固める際に使用。
+disable-model-invocation: true
+allowed-tools: Read, Write, Edit, Bash, Grep, Glob
+---
+
+# DefineDesignSystem (a-010)
+
+## 目的
+
+- プロジェクト全体で一貫したビジュアルデザインを実現するデザインシステムを定義する。
+- カラーパレット、タイポグラフィ、スペーシング、コンポーネントスタイルを標準化する。
+- デザイナーと開発者が共通言語として使える仕様書を作成する。
+
+## 前提
+
+- `docs/project/design/03-screen-design.md` が作成されている（画面設計完了）
+- `docs/project/design/01-tech-stack.md` が作成されている（UI フレームワーク決定）
+
+## 手順
+
+### 1. 既存ドキュメントの確認
+
+- `docs/project/design/01-tech-stack.md` — 使用する CSS フレームワーク（Tailwind, MUI 等）
+- `docs/project/design/03-screen-design.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/04-design-system.md" \
+   "docs/project/design/04-design-system.md"
+```
+
+### 3. カラーパレットの定義
+
+- **Primary Colors**: ブランドカラー（1〜2色）
+- **Secondary Colors**: アクセントカラー
+- **Semantic Colors**: Success, Warning, Error, Info
+- **Neutral Colors**: グレースケール（背景、テキスト、ボーダー）
+- **Dark Mode 対応**: 必要に応じてダークテーマも定義
+
+CSS 変数のサンプルは [examples/css-tokens.md](examples/css-tokens.md#カラーパレット) を参照。
+
+### 4. タイポグラフィの定義
+
+- **フォントファミリー**: 見出し用、本文用、コード用
+- **フォントサイズスケール**: xs, sm, base, lg, xl, 2xl, 3xl, 4xl
+- **行間**: tight, normal, relaxed
+- **フォントウェイト**: normal, medium, semibold, bold
+
+サンプル: [examples/css-tokens.md](examples/css-tokens.md#タイポグラフィ)
+
+### 5. スペーシングシステムの定義
+
+基本単位は 4px または 8px ベース。スケール・用途・サンプルは [examples/css-tokens.md](examples/css-tokens.md#スペーシング) と [reference/component-catalog.md](reference/component-catalog.md#スペーシングの設計方針) を参照。
+
+### 6. コンポーネントスタイルの定義
+
+以下のコンポーネントについて、バリアントとステートを定義:
+
+- ボタン
+- フォーム要素（Input, Textarea, Select, Checkbox, Radio）
+- カード / コンテナ
+- その他（Badge, Tag, Avatar, Tooltip, Modal）
+
+詳細なバリアント・ステート一覧は [reference/component-catalog.md](reference/component-catalog.md#コンポーネントスタイル) を参照。
+
+### 7. アイコン・イラストガイドライン
+
+- アイコンライブラリ（Lucide / Heroicons / Material Icons 等）の選定
+- サイズ規定とスタイル統一（Outline / Filled のいずれか）
+
+詳細: [reference/component-catalog.md](reference/component-catalog.md#アイコンガイドライン)
+
+### 8. アニメーション・トランジション
+
+- Duration: fast(150ms), normal(300ms), slow(500ms)
+- Easing: ease-in-out をデフォルトに
+
+サンプル: [examples/css-tokens.md](examples/css-tokens.md#アニメーション)
+
+### 9. ドキュメント作成
+
+`docs/project/design/04-design-system.md` に以下を必須セクションとして記入:
+
+- カラーパレット
+- タイポグラフィ
+- スペーシング
+- コンポーネントスタイル（主要なもの）
+
+### 10. 完了条件の確認
+
+- [ ] `04-design-system.md` が作成されている
+- [ ] カラーパレットが定義されている
+- [ ] タイポグラフィスケールが定義されている
+- [ ] スペーシングシステムが定義されている
+- [ ] 主要コンポーネント（ボタン、フォーム）のスタイルが定義されている
+
+### 11. Git への追加（オプション）
+
+```bash
+git add docs/project/design/04-design-system.md
+git status
+```
+
+推奨コミットメッセージ:
+
+```
+docs: デザインシステムの定義
+
+- カラーパレット、タイポグラフィ、スペーシングを定義
+- 主要コンポーネントのスタイルガイドを追加
+```
+
+## 完了条件
+
+- `docs/project/design/04-design-system.md` が作成されている
+- カラー・タイポグラフィ・スペーシングが定義されている
+- 主要コンポーネントのスタイルが定義されている
+- ユーザーが内容を承認している
+
+## エスカレーション
+
+- **ブランドガイドラインなし**: 「ブランドカラーやフォントの指定がありますか？なければ汎用的なパレットを提案します。」
+- **CSS フレームワーク未定**: 「`/a-007-define-tech-stack` で技術スタックを先に決定しましょう。」
+- **コンポーネントが多すぎる**: 「まずはボタン・フォーム・カードから始め、必要に応じて拡張しましょう。」
+
+## 参考
+
+- [examples/css-tokens.md](examples/css-tokens.md) — カラー/タイポ/スペーシング/アニメーションの CSS サンプル
+- [reference/component-catalog.md](reference/component-catalog.md) — コンポーネント・アイコン・アニメーションの標準仕様

package/skills/a-010-define-design-system/examples/css-tokens.md

@@ -0,0 +1,71 @@
+# CSS デザイントークンの記載例
+
+SKILL.md 手順3〜5, 8 の CSS 変数サンプル。
+
+## カラーパレット
+
+```css
+:root {
+  /* Primary */
+  --color-primary-50: #eff6ff;
+  --color-primary-500: #3b82f6;
+  --color-primary-900: #1e3a8a;
+
+  /* Semantic */
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-info: #0ea5e9;
+
+  /* Neutral */
+  --color-gray-50: #f9fafb;
+  --color-gray-500: #6b7280;
+  --color-gray-900: #111827;
+}
+```
+
+## タイポグラフィ
+
+```css
+:root {
+  /* Font Family */
+  --font-sans: "Inter", "Noto Sans JP", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* Font Size */
+  --text-xs: 0.75rem;    /* 12px */
+  --text-sm: 0.875rem;   /* 14px */
+  --text-base: 1rem;     /* 16px */
+  --text-lg: 1.125rem;   /* 18px */
+  --text-xl: 1.25rem;    /* 20px */
+  --text-2xl: 1.5rem;    /* 24px */
+  --text-3xl: 1.875rem;  /* 30px */
+  --text-4xl: 2.25rem;   /* 36px */
+}
+```
+
+## スペーシング
+
+```css
+:root {
+  --space-0: 0;
+  --space-1: 0.25rem;  /* 4px */
+  --space-2: 0.5rem;   /* 8px */
+  --space-3: 0.75rem;  /* 12px */
+  --space-4: 1rem;     /* 16px */
+  --space-6: 1.5rem;   /* 24px */
+  --space-8: 2rem;     /* 32px */
+  --space-12: 3rem;    /* 48px */
+  --space-16: 4rem;    /* 64px */
+}
+```
+
+## アニメーション
+
+```css
+:root {
+  --transition-fast: 150ms ease-in-out;
+  --transition-normal: 300ms ease-in-out;
+  --transition-slow: 500ms ease-in-out;
+}
+```

package/skills/a-010-define-design-system/reference/component-catalog.md

@@ -0,0 +1,44 @@
+# コンポーネント・アイコン・アニメーションのカタログ
+
+SKILL.md 手順6〜8で参照するコンポーネント/アイコン/アニメーションの標準仕様。
+
+## コンポーネントスタイル
+
+### ボタン
+
+- **バリアント**: Primary, Secondary, Outline, Ghost, Danger
+- **サイズ**: sm, md, lg
+- **ステート**: Default, Hover, Active, Disabled, Loading
+
+### フォーム要素
+
+- **種類**: Input, Textarea, Select, Checkbox, Radio
+- **ステート**: Default, Focus, Error, Disabled
+
+### カード / コンテナ
+
+- 角丸（border-radius）
+- シャドウ（elevation 3段階程度）
+- パディング（内側余白）
+
+### その他
+
+- Badge, Tag, Avatar, Tooltip, Modal
+
+## アイコンガイドライン
+
+- **ライブラリ候補**: Lucide, Heroicons, Material Icons
+- **サイズ規定**: sm(16px), md(20px), lg(24px), xl(32px)
+- **スタイル**: Outline / Filled の統一（混在させない）
+
+## アニメーション・トランジション
+
+- **Duration**: fast(150ms), normal(300ms), slow(500ms)
+- **Easing**: ease-in-out をデフォルトに
+- **使用箇所**: hover, focus, モーダル開閉, ページ遷移
+
+## スペーシングの設計方針
+
+- **基本単位**: 4px または 8px ベース
+- **スケール**: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64
+- **用途**: margin, padding, gap