yodogawa 1.0.5 → 1.0.7

package/.windsurf/templates/project/04-design/04-design-system.md

@@ -0,0 +1,261 @@
+# デザインシステム
+
+> 最終更新: YYYY-MM-DD
+
+## 概要
+
+このドキュメントでは、プロジェクト全体で使用するデザインシステムを定義します。
+
+---
+
+## カラーパレット
+
+### Primary Colors
+
+| 名前        | HEX       | 用途           |
+| ----------- | --------- | -------------- |
+| primary-50  | `#eff6ff` | 背景（薄）     |
+| primary-100 | `#dbeafe` | ホバー状態     |
+| primary-500 | `#3b82f6` | メインカラー   |
+| primary-600 | `#2563eb` | ホバー（濃）   |
+| primary-900 | `#1e3a8a` | テキスト（濃） |
+
+### Secondary Colors
+
+| 名前          | HEX       | 用途       |
+| ------------- | --------- | ---------- |
+| secondary-500 | `#8b5cf6` | アクセント |
+
+### Semantic Colors
+
+| 名前    | HEX       | 用途         |
+| ------- | --------- | ------------ |
+| success | `#22c55e` | 成功、完了   |
+| warning | `#f59e0b` | 警告、注意   |
+| error   | `#ef4444` | エラー、削除 |
+| info    | `#0ea5e9` | 情報、ヘルプ |
+
+### Neutral Colors
+
+| 名前     | HEX       | 用途             |
+| -------- | --------- | ---------------- |
+| gray-50  | `#f9fafb` | 背景（明）       |
+| gray-100 | `#f3f4f6` | カード背景       |
+| gray-200 | `#e5e7eb` | ボーダー         |
+| gray-400 | `#9ca3af` | プレースホルダー |
+| gray-500 | `#6b7280` | サブテキスト     |
+| gray-700 | `#374151` | 本文テキスト     |
+| gray-900 | `#111827` | 見出しテキスト   |
+
+### Dark Mode（必要な場合）
+
+<!-- Dark Mode用のカラー定義 -->
+
+---
+
+## タイポグラフィ
+
+### フォントファミリー
+
+| 用途   | フォント                      |
+| ------ | ----------------------------- |
+| 見出し | `Inter`, `Noto Sans JP`       |
+| 本文   | `Inter`, `Noto Sans JP`       |
+| コード | `JetBrains Mono`, `monospace` |
+
+### フォントサイズ
+
+| 名前 | サイズ | 行間 | 用途             |
+| ---- | ------ | ---- | ---------------- |
+| xs   | 12px   | 1.5  | キャプション     |
+| sm   | 14px   | 1.5  | 補足テキスト     |
+| base | 16px   | 1.5  | 本文             |
+| lg   | 18px   | 1.5  | リード文         |
+| xl   | 20px   | 1.4  | 小見出し         |
+| 2xl  | 24px   | 1.3  | セクション見出し |
+| 3xl  | 30px   | 1.2  | ページタイトル   |
+| 4xl  | 36px   | 1.1  | ヒーロー見出し   |
+
+### フォントウェイト
+
+| 名前     | 値  | 用途         |
+| -------- | --- | ------------ |
+| normal   | 400 | 本文         |
+| medium   | 500 | 強調         |
+| semibold | 600 | 見出し       |
+| bold     | 700 | 重要な見出し |
+
+---
+
+## スペーシング
+
+### スケール（4px ベース）
+
+| 名前 | 値      | ピクセル |
+| ---- | ------- | -------- |
+| 0    | 0       | 0px      |
+| 1    | 0.25rem | 4px      |
+| 2    | 0.5rem  | 8px      |
+| 3    | 0.75rem | 12px     |
+| 4    | 1rem    | 16px     |
+| 5    | 1.25rem | 20px     |
+| 6    | 1.5rem  | 24px     |
+| 8    | 2rem    | 32px     |
+| 10   | 2.5rem  | 40px     |
+| 12   | 3rem    | 48px     |
+| 16   | 4rem    | 64px     |
+
+### 使用ガイドライン
+
+- **コンポーネント内部**: 2〜4 (8〜16px)
+- **セクション間**: 8〜12 (32〜48px)
+- **ページ余白**: 4〜6 (16〜24px)
+
+---
+
+## コンポーネントスタイル
+
+### ボタン
+
+#### バリアント
+
+| バリアント | 背景        | テキスト    | 用途               |
+| ---------- | ----------- | ----------- | ------------------ |
+| Primary    | primary-500 | white       | 主要アクション     |
+| Secondary  | gray-100    | gray-700    | 副次アクション     |
+| Outline    | transparent | primary-500 | 代替アクション     |
+| Ghost      | transparent | gray-700    | 控えめなアクション |
+| Danger     | error       | white       | 削除、危険操作     |
+
+#### サイズ
+
+| サイズ | パディング | フォント |
+| ------ | ---------- | -------- |
+| sm     | 8px 12px   | 14px     |
+| md     | 10px 16px  | 16px     |
+| lg     | 12px 20px  | 18px     |
+
+#### ステート
+
+- **Default**: 通常状態
+- **Hover**: 明度を10%変更
+- **Active**: 明度を20%変更
+- **Disabled**: opacity: 0.5, cursor: not-allowed
+- **Loading**: スピナー表示
+
+### フォーム要素
+
+#### Input
+
+| プロパティ | 値                 |
+| ---------- | ------------------ |
+| 高さ       | 40px (md)          |
+| ボーダー   | 1px solid gray-200 |
+| 角丸       | 6px                |
+| Focus      | ring-2 primary-500 |
+| Error      | border-error       |
+
+#### その他
+
+- **Textarea**: Inputと同様、min-height: 100px
+- **Select**: Inputと同様 + ドロップダウンアイコン
+- **Checkbox/Radio**: 20px × 20px
+
+### カード
+
+| プロパティ | 値                        |
+| ---------- | ------------------------- |
+| 背景       | white                     |
+| ボーダー   | 1px solid gray-200        |
+| 角丸       | 8px                       |
+| シャドウ   | 0 1px 3px rgba(0,0,0,0.1) |
+| パディング | 16px〜24px                |
+
+---
+
+## アイコン
+
+### ライブラリ
+
+- **推奨**: Lucide Icons / Heroicons
+
+### サイズ
+
+| 名前 | サイズ | 用途           |
+| ---- | ------ | -------------- |
+| sm   | 16px   | インライン     |
+| md   | 20px   | ボタン内       |
+| lg   | 24px   | 単独表示       |
+| xl   | 32px   | 特徴セクション |
+
+### スタイル
+
+- **統一**: Outline または Solid（混在させない）
+
+---
+
+## アニメーション
+
+### Duration
+
+| 名前   | 値    | 用途               |
+| ------ | ----- | ------------------ |
+| fast   | 150ms | ホバー、フォーカス |
+| normal | 300ms | パネル開閉         |
+| slow   | 500ms | ページ遷移         |
+
+### Easing
+
+- **デフォルト**: `ease-in-out`
+- **入場**: `ease-out`
+- **退場**: `ease-in`
+
+### 使用例
+
+```css
+.button {
+  transition: background-color 150ms ease-in-out;
+}
+
+.modal {
+  transition:
+    opacity 300ms ease-out,
+    transform 300ms ease-out;
+}
+```
+
+---
+
+## CSS変数（参考実装）
+
+```css
+:root {
+  /* Colors */
+  --color-primary-500: #3b82f6;
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+
+  /* Typography */
+  --font-sans: "Inter", "Noto Sans JP", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-4: 1rem;
+  --space-8: 2rem;
+
+  /* Transitions */
+  --transition-fast: 150ms ease-in-out;
+  --transition-normal: 300ms ease-in-out;
+}
+```
+
+---
+
+## 変更履歴
+
+| バージョン | 日付       | 変更内容 |
+| ---------- | ---------- | -------- |
+| 1.0        | YYYY-MM-DD | 初版作成 |

package/.windsurf/workflows/a-010-DefineDesignSystem.md

@@ -0,0 +1,210 @@
+---
+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
+  cp ".windsurf/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) で技術スタックを決定しましょう。」と提案する。
+- コンポーネントが多すぎる場合：
+  - 「まずは主要なコンポーネント（ボタン、フォーム、カード）から始めて、必要に応じて拡張しましょう。」と提案する。

package/.windsurf/workflows/{a-010-DefineDataModel.md → a-011-DefineDataModel.md}

@@ -2,7 +2,7 @@
 description: ドメインモデルと画面設計からデータベース構造（ERD）を定義し、エンティティ、属性、リレーションシップ、制約を明確化するワークフロー
 ---
 
-# DefineDataModel (a-010)
+# DefineDataModel (a-011)
 
 ## 目的
 
@@ -34,7 +34,7 @@ description: ドメインモデルと画面設計からデータベース構造
 - テンプレートをコピーして作業用ファイルを作成する：
 
   ```bash
-  cp ".windsurf/templates/project/04-design/04-data-model.md" "docs/project/design/04-data-model.md"
+  cp ".windsurf/templates/project/04-design/05-data-model.md" "docs/project/design/05-data-model.md"
   ```
 
 ### 3. エンティティの抽出と提案
@@ -73,7 +73,7 @@ description: ドメインモデルと画面設計からデータベース構造
 
 ### 6. ドキュメント作成
 
-- `docs/project/design/04-data-model.md` に決定事項を記入する。
+- `docs/project/design/05-data-model.md` に決定事項を記入する。
 - **必須項目**:
   - エンティティ一覧
   - リレーションシップ定義
@@ -82,20 +82,19 @@ description: ドメインモデルと画面設計からデータベース構造
 ### 7. 完了条件と構造の確認
 
 - 以下の完了条件を満たしているか、コマンドとチェックリストで確認してください：
-
   1. **構造確認**:
 
      ```bash
      # エンティティ一覧の確認
-     grep "## エンティティ一覧" docs/project/design/04-data-model.md && echo "OK" || echo "MISSING: Entities"
+     grep "## エンティティ一覧" docs/project/design/05-data-model.md && echo "OK" || echo "MISSING: Entities"
      # ERDの確認
-     grep "\`\`\`mermaid" docs/project/design/04-data-model.md && echo "OK" || echo "MISSING: ERD"
+     grep "\`\`\`mermaid" docs/project/design/05-data-model.md && echo "OK" || echo "MISSING: ERD"
      # リレーションシップ定義の確認
-     grep "## リレーションシップ" docs/project/design/04-data-model.md && echo "OK" || echo "MISSING: Relationships"
+     grep "## リレーションシップ" docs/project/design/05-data-model.md && echo "OK" || echo "MISSING: Relationships"
      ```
 
   2. **チェックリスト**:
-     - [ ] `docs/project/design/04-data-model.md` が作成されている
+     - [ ] `docs/project/design/05-data-model.md` が作成されている
      - [ ] 全エンティティの物理名・論理名が定義されている
      - [ ] ERDが正しくレンダリングされる
 
@@ -105,7 +104,7 @@ description: ドメインモデルと画面設計からデータベース構造
 - 「はい」の場合、以下を実行：
 
   ```bash
-  git add docs/project/design/04-data-model.md
+  git add docs/project/design/05-data-model.md
   git status
   ```
 
@@ -120,7 +119,7 @@ description: ドメインモデルと画面設計からデータベース構造
 
 ## 完了条件
 
-- `docs/project/design/04-data-model.md` が作成されている。
+- `docs/project/design/05-data-model.md` が作成されている。
 - データベーススキーマ（テーブル、カラム、型、制約）が定義されている。
 - エンティティ間の関係性が可視化（ERD）されている。
 - ユーザーが内容を承認している。

package/.windsurf/workflows/{a-011-DefineAPISpec.md → a-012-DefineAPISpec.md}

@@ -2,7 +2,7 @@
 description: データモデルと画面設計からAPI仕様を定義し、認証方式、エンドポイント一覧、共通レスポンス形式を明確化するワークフロー
 ---
 
-# DefineAPISpec (a-011)
+# DefineAPISpec (a-012)
 
 ## 目的
 
@@ -15,7 +15,7 @@ description: データモデルと画面設計からAPI仕様を定義し、認
 ## 前提
 
 - `docs/project/design/01-tech-stack.md` が作成されていること（APIスタイル選定済み）。
-- `docs/project/design/04-data-model.md` が作成されていること。
+- `docs/project/design/05-data-model.md` が作成されていること。
 - `docs/project/design/03-screen-design.md` が作成されていること。
 - `docs/project/design/` ディレクトリが存在すること。
 
@@ -25,7 +25,7 @@ description: データモデルと画面設計からAPI仕様を定義し、認
 
 - 必要なドキュメントを読み込む：
   - `docs/project/design/01-tech-stack.md`
-  - `docs/project/design/04-data-model.md`
+  - `docs/project/design/05-data-model.md`
   - `docs/project/design/03-screen-design.md`
 
 - ドキュメントが不足している場合、対応するワークフローの実行を促す。
@@ -35,13 +35,13 @@ description: データモデルと画面設計からAPI仕様を定義し、認
 - テンプレートをコピーして作業用ファイルを作成する：
 
   ```bash
-  cp ".windsurf/templates/project/04-design/05-api-spec.md" "docs/project/design/05-api-spec.md"
+  cp ".windsurf/templates/project/04-design/06-api-spec.md" "docs/project/design/06-api-spec.md"
   ```
 
 ### 3. APIスタイルの確認と提案
 
 - 技術スタック（01-tech-stack.md）で選定されたAPIスタイル（REST, GraphQL等）を確認する。
-- データモデル（04-data-model.md）と画面設計（03-screen-design.md）から、必要なリソースと操作を抽出する。
+- データモデル（05-data-model.md）と画面設計（03-screen-design.md）から、必要なリソースと操作を抽出する。
 - **エンドポイント案の提示**:
   - 「以下のリソースに対するエンドポイントを定義します：」
   - 「Users: 一覧, 詳細, 作成, 更新, 削除」
@@ -70,7 +70,7 @@ description: データモデルと画面設計からAPI仕様を定義し、認
 
 ### 5. ドキュメント作成
 
-- `docs/project/design/05-api-spec.md` に決定事項を記入する。
+- `docs/project/design/06-api-spec.md` に決定事項を記入する。
 - **必須項目**:
   - 認証・認可仕様
   - エンドポイント一覧（リソース別）
@@ -79,20 +79,19 @@ description: データモデルと画面設計からAPI仕様を定義し、認
 ### 6. 完了条件と構造の確認
 
 - 以下の完了条件を満たしているか、コマンドとチェックリストで確認してください：
-
   1. **構造確認**:
 
      ```bash
      # 認証セクションの確認
-     grep "## 認証・認可" docs/project/design/05-api-spec.md && echo "OK" || echo "MISSING: Auth section"
+     grep "## 認証・認可" docs/project/design/06-api-spec.md && echo "OK" || echo "MISSING: Auth section"
      # エンドポイント一覧の確認
-     grep "## エンドポイント一覧" docs/project/design/05-api-spec.md && echo "OK" || echo "MISSING: Endpoints"
+     grep "## エンドポイント一覧" docs/project/design/06-api-spec.md && echo "OK" || echo "MISSING: Endpoints"
      # レスポンス形式の確認
-     grep "## 共通レスポンス形式" docs/project/design/05-api-spec.md && echo "OK" || echo "MISSING: Response format"
+     grep "## 共通レスポンス形式" docs/project/design/06-api-spec.md && echo "OK" || echo "MISSING: Response format"
      ```
 
   2. **チェックリスト**:
-     - [ ] `docs/project/design/05-api-spec.md` が作成されている
+     - [ ] `docs/project/design/06-api-spec.md` が作成されている
      - [ ] 認証方式が明確に定義されている
      - [ ] 主要なリソースのCRUDエンドポイントが網羅されている
 
@@ -102,7 +101,7 @@ description: データモデルと画面設計からAPI仕様を定義し、認
 - 「はい」の場合、以下を実行：
 
   ```bash
-  git add docs/project/design/05-api-spec.md
+  git add docs/project/design/06-api-spec.md
   git status
   ```
 
@@ -117,7 +116,7 @@ description: データモデルと画面設計からAPI仕様を定義し、認
 
 ## 完了条件
 
-- `docs/project/design/05-api-spec.md` が作成されている。
+- `docs/project/design/06-api-spec.md` が作成されている。
 - 認証・認可の仕組みが定義されている。
 - エンドポイント一覧（メソッド、パス、認証要否）が定義されている。
 - 共通レスポンス形式（成功/エラー）が定義されている。

package/.windsurf/workflows/{a-012-DefineArchitecture.md → a-013-DefineArchitecture.md}

@@ -2,7 +2,7 @@
 description: 技術スタック、リポジトリ構造、データモデル、API仕様を統合し、システム全体のアーキテクチャ設計とADRを定義するワークフロー
 ---
 
-# DefineArchitecture (a-012)
+# DefineArchitecture (a-013)
 
 ## 目的
 
@@ -15,8 +15,8 @@ description: 技術スタック、リポジトリ構造、データモデル、A
 
 - `docs/project/design/01-tech-stack.md` が作成されていること。
 - `docs/project/design/02-repository-structure.md` が作成されていること。
-- `docs/project/design/04-data-model.md` が作成されていること。
-- `docs/project/design/05-api-spec.md` が作成されていること。
+- `docs/project/design/05-data-model.md` が作成されていること。
+- `docs/project/design/06-api-spec.md` が作成されていること。
 - `docs/project/design/` ディレクトリが存在すること。
 
 ## 手順
@@ -26,8 +26,8 @@ description: 技術スタック、リポジトリ構造、データモデル、A
 - 必要なドキュメントを読み込む：
   - `docs/project/design/01-tech-stack.md`
   - `docs/project/design/02-repository-structure.md`
-  - `docs/project/design/04-data-model.md`
-  - `docs/project/design/05-api-spec.md`
+  - `docs/project/design/05-data-model.md`
+  - `docs/project/design/06-api-spec.md`
 
 - ドキュメントが不足している場合、対応するワークフローの実行を促す。
 
@@ -36,7 +36,7 @@ description: 技術スタック、リポジトリ構造、データモデル、A
 - テンプレートをコピーして作業用ファイルを作成する：
 
   ```bash
-  cp ".windsurf/templates/project/04-design/06-architecture.md" "docs/project/design/06-architecture.md"
+  cp ".windsurf/templates/project/04-design/07-architecture.md" "docs/project/design/07-architecture.md"
   ```
 
 ### 3. アーキテクチャの提案
@@ -67,7 +67,7 @@ description: 技術スタック、リポジトリ構造、データモデル、A
 
 ### 5. ドキュメント作成
 
-- `docs/project/design/06-architecture.md` に決定事項を記入する。
+- `docs/project/design/07-architecture.md` に決定事項を記入する。
 - **必須項目**:
   - システムアーキテクチャ図 (Mermaid)
   - 採用アーキテクチャパターンの説明
@@ -76,20 +76,19 @@ description: 技術スタック、リポジトリ構造、データモデル、A
 ### 6. 完了条件と構造の確認
 
 - 以下の完了条件を満たしているか、コマンドとチェックリストで確認してください：
-
   1. **構造確認**:
 
      ```bash
      # アーキテクチャ図の確認
-     grep "\`\`\`mermaid" docs/project/design/06-architecture.md && echo "OK" || echo "MISSING: Architecture Diagram"
+     grep "\`\`\`mermaid" docs/project/design/07-architecture.md && echo "OK" || echo "MISSING: Architecture Diagram"
      # パターン定義の確認
-     grep "## 採用アーキテクチャパターン" docs/project/design/06-architecture.md && echo "OK" || echo "MISSING: Pattern definition"
+     grep "## 採用アーキテクチャパターン" docs/project/design/07-architecture.md && echo "OK" || echo "MISSING: Pattern definition"
      # ADRセクションの確認
-     grep "## ADR" docs/project/design/06-architecture.md && echo "OK" || echo "MISSING: ADR section"
+     grep "## ADR" docs/project/design/07-architecture.md && echo "OK" || echo "MISSING: ADR section"
      ```
 
   2. **チェックリスト**:
-     - [ ] `docs/project/design/06-architecture.md` が作成されている
+     - [ ] `docs/project/design/07-architecture.md` が作成されている
      - [ ] システム全体像が視覚化されている
      - [ ] 重要な技術選定の理由（ADR）が記録されている
 
@@ -99,7 +98,7 @@ description: 技術スタック、リポジトリ構造、データモデル、A
 - 「はい」の場合、以下を実行：
 
   ```bash
-  git add docs/project/design/06-architecture.md
+  git add docs/project/design/07-architecture.md
   git status
   ```
 
@@ -114,7 +113,7 @@ description: 技術スタック、リポジトリ構造、データモデル、A
 
 ## 完了条件
 
-- `docs/project/design/06-architecture.md` が作成されている。
+- `docs/project/design/07-architecture.md` が作成されている。
 - システム全体の構成要素と関係性が可視化されている。
 - 技術選定の背景（ADR）が文書化され、将来の参照用に残されている。
 - ユーザーが内容を承認している。

package/.windsurf/workflows/{a-013-DefineInfrastructure.md → a-014-DefineInfrastructure.md}

@@ -2,7 +2,7 @@
 description: 技術スタックとアーキテクチャ設計を基に、インフラ構成図、環境構成、運用方針を定義するワークフロー
 ---
 
-# DefineInfrastructure (a-013)
+# DefineInfrastructure (a-014)
 
 ## 目的
 
@@ -14,7 +14,7 @@ description: 技術スタックとアーキテクチャ設計を基に、イン
 ## 前提
 
 - `docs/project/design/01-tech-stack.md` が作成されていること（デプロイ環境、インフラ技術選定済み）。
-- `docs/project/design/06-architecture.md` が作成されていること（推奨）。
+- `docs/project/design/07-architecture.md` が作成されていること（推奨）。
 - `docs/project/design/` ディレクトリが存在すること。
 
 ## 手順
@@ -23,7 +23,7 @@ description: 技術スタックとアーキテクチャ設計を基に、イン
 
 - 必要なドキュメントを読み込む：
   - `docs/project/design/01-tech-stack.md`
-  - `docs/project/design/06-architecture.md`
+  - `docs/project/design/07-architecture.md`
 
 - ドキュメントが不足している場合、対応するワークフローの実行を促す。
 
@@ -32,7 +32,7 @@ description: 技術スタックとアーキテクチャ設計を基に、イン
 - テンプレートをコピーして作業用ファイルを作成する：
 
   ```bash
-  cp ".windsurf/templates/project/04-design/07-infrastructure.md" "docs/project/design/07-infrastructure.md"
+  cp ".windsurf/templates/project/04-design/08-infrastructure.md" "docs/project/design/08-infrastructure.md"
   ```
 
 ### 3. インフラ構成の提案
@@ -68,7 +68,7 @@ description: 技術スタックとアーキテクチャ設計を基に、イン
 
 ### 5. ドキュメント作成
 
-- `docs/project/design/07-infrastructure.md` に決定事項を記入する。
+- `docs/project/design/08-infrastructure.md` に決定事項を記入する。
 - **必須項目**:
   - インフラ構成図 (Mermaid)
   - 環境構成表
@@ -77,20 +77,19 @@ description: 技術スタックとアーキテクチャ設計を基に、イン
 ### 6. 完了条件と構造の確認
 
 - 以下の完了条件を満たしているか、コマンドとチェックリストで確認してください：
-
   1. **構造確認**:
 
      ```bash
      # インフラ構成図の確認
-     grep "\`\`\`mermaid" docs/project/design/07-infrastructure.md && echo "OK" || echo "MISSING: Infra Diagram"
+     grep "\`\`\`mermaid" docs/project/design/08-infrastructure.md && echo "OK" || echo "MISSING: Infra Diagram"
      # 環境構成の確認
-     grep "## 環境構成" docs/project/design/07-infrastructure.md && echo "OK" || echo "MISSING: Environments"
+     grep "## 環境構成" docs/project/design/08-infrastructure.md && echo "OK" || echo "MISSING: Environments"
      # 運用方針の確認
-     grep "## 主要な運用方針" docs/project/design/07-infrastructure.md && echo "OK" || echo "MISSING: Operations"
+     grep "## 主要な運用方針" docs/project/design/08-infrastructure.md && echo "OK" || echo "MISSING: Operations"
      ```
 
   2. **チェックリスト**:
-     - [ ] `docs/project/design/07-infrastructure.md` が作成されている
+     - [ ] `docs/project/design/08-infrastructure.md` が作成されている
      - [ ] 本番環境の構成（冗長化など）が明確になっている
      - [ ] バックアップや監視の方針が記録されている
 
@@ -100,7 +99,7 @@ description: 技術スタックとアーキテクチャ設計を基に、イン
 - 「はい」の場合、以下を実行：
 
   ```bash
-  git add docs/project/design/07-infrastructure.md
+  git add docs/project/design/08-infrastructure.md
   git status
   ```
 
@@ -115,7 +114,7 @@ description: 技術スタックとアーキテクチャ設計を基に、イン
 
 ## 完了条件
 
-- `docs/project/design/07-infrastructure.md` が作成されている。
+- `docs/project/design/08-infrastructure.md` が作成されている。
 - インフラの物理構成とネットワーク構成が可視化されている。
 - 環境ごとの差異が明確になっている。
 - 運用上の重要事項（バックアップ、セキュリティ）が定義されている。

package/.windsurf/workflows/{a-014-ReviewDesign.md → a-015-ReviewDesign.md}

@@ -3,7 +3,7 @@ description: 設計ドキュメント間の一貫性をチェックし、要件
 auto_execution_mode: 1
 ---
 
-# ReviewDesign (a-014)
+# ReviewDesign (a-015)
 
 ## 目的
 
@@ -19,10 +19,10 @@ auto_execution_mode: 1
   - `docs/project/design/01-tech-stack.md`
   - `docs/project/design/02-repository-structure.md`
   - `docs/project/design/03-screen-design.md`
-  - `docs/project/design/04-data-model.md`
-  - `docs/project/design/05-api-spec.md`
-  - `docs/project/design/06-architecture.md`
-  - `docs/project/design/07-infrastructure.md`
+  - `docs/project/design/05-data-model.md`
+  - `docs/project/design/06-api-spec.md`
+  - `docs/project/design/07-architecture.md`
+  - `docs/project/design/08-infrastructure.md`
 
 ## 手順
 
@@ -42,17 +42,17 @@ auto_execution_mode: 1
 
 #### 2.1 テックスタック ↔ アーキテクチャ
 
-- **整合性**: 選定された技術（01-tech-stack.md）がアーキテクチャ図（06-architecture.md）のコンポーネントと一致しているか。
+- **整合性**: 選定された技術（01-tech-stack.md）がアーキテクチャ図（07-architecture.md）のコンポーネントと一致しているか。
 - **ADR**: 重要な技術選定理由がADRとして記録されているか。
 
 #### 2.2 データモデル ↔ ドメインモデル
 
-- **カバレッジ**: ドメインモデルのAggregate（01-domain-model.md）がデータモデル（04-data-model.md）のエンティティとして定義されているか。
+- **カバレッジ**: ドメインモデルのAggregate（01-domain-model.md）がデータモデル（05-data-model.md）のエンティティとして定義されているか。
 - **用語統一**: テーブル名やカラム名がユビキタス言語と一致しているか。
 
 #### 2.3 API仕様 ↔ データモデル
 
-- **リソース**: APIリソース（05-api-spec.md）がデータモデルのエンティティに基づいているか。
+- **リソース**: APIリソース（06-api-spec.md）がデータモデルのエンティティに基づいているか。
 - **フィールド**: APIのレスポンスフィールドがデータモデルに存在するか。
 
 #### 2.4 画面設計 ↔ API仕様
@@ -62,7 +62,7 @@ auto_execution_mode: 1
 
 #### 2.5 インフラ ↔ アーキテクチャ
 
-- **構成**: インフラ構成（07-infrastructure.md）がアーキテクチャ図のコンポーネントを網羅しているか。
+- **構成**: インフラ構成（08-infrastructure.md）がアーキテクチャ図のコンポーネントを網羅しているか。
 - **非機能要件**: 可用性やセキュリティ要件がインフラ設計に反映されているか。
 
 ### 3. レビュー結果レポートの作成
@@ -73,9 +73,11 @@ auto_execution_mode: 1
 
 ```markdown
 # 設計ドキュメント一貫性レビュー結果
+
 **実施日**: YYYY-MM-DD
 
 ## サマリー
+
 - ✅ OK: X項目
 - ⚠️ Warning: X項目
 - ❌ Error: X項目
@@ -83,23 +85,29 @@ auto_execution_mode: 1
 ## 詳細
 
 ### 1. テックスタック ↔ アーキテクチャ
+
 - ✅ OK: 選定技術はアーキテクチャパターンに適合しています。
 
 ### 2. データモデル ↔ ドメインモデル
+
 - ❌ **Error**: Aggregate「Order」に対応するテーブル定義が見つかりません。
 
 ### 3. API仕様 ↔ データモデル
+
 - ⚠️ **Warning**: APIレスポンスのフィールド `user_rank` がデータモデルにありません。
 
 ### 4. 画面設計 ↔ API仕様
+
 - ❌ **Error**: 「注文履歴画面」に必要な `GET /api/orders/history` が定義されていません。
 
 ### 5. インフラ ↔ アーキテクチャ
+
 - ✅ OK: 冗長化構成はアーキテクチャの可用性要件を満たしています。
 
 ## 推奨アクション
-1. `DefineDataModel` (a-010) で `orders` テーブルを定義する。
-2. `DefineAPISpec` (a-011) で `GET /api/orders/history` を追加する。
+
+1. `DefineDataModel` (a-011) で `orders` テーブルを定義する。
+2. `DefineAPISpec` (a-012) で `GET /api/orders/history` を追加する。
 ```
 
 ### 4. 結果の報告と修正提案

package/CHANGELOG.md

@@ -0,0 +1,43 @@
+# 変更履歴
+
+このプロジェクトのすべての重要な変更はこのファイルに記録されます。
+
+フォーマットは [Keep a Changelog](https://keepachangelog.com/ja/1.0.0/) に基づいており、
+このプロジェクトは [Semantic Versioning](https://semver.org/lang/ja/spec/v2.0.0.html) に準拠しています。
+
+## [1.0.7] - 2026-01-27
+
+### 追加
+
+- **CHANGELOG**: 変更履歴ファイルを追加し、npmパッケージに含めるようにしました。
+
+## [1.0.6] - 2026-01-27
+
+### 追加
+
+- **新ワークフロー**: デザインシステム定義用の `a-010-DefineDesignSystem.md` を追加しました（カラー、タイポグラフィ、スペーシング等）。
+- **新テンプレート**: デザインシステム定義用のテンプレート `04-design-system.md` を追加しました。
+
+### 変更
+
+- **ワークフロー番号の再編成**: 新しいデザインシステムワークフローに合わせて、既存の設計ワークフローの番号を更新しました：
+  - `a-010-DefineDataModel` -> `a-011-DefineDataModel`
+  - `a-011-DefineAPISpec` -> `a-012-DefineAPISpec`
+  - `a-012-DefineArchitecture` -> `a-013-DefineArchitecture`
+  - `a-013-DefineInfrastructure` -> `a-014-DefineInfrastructure`
+  - `a-014-ReviewDesign` -> `a-015-ReviewDesign`
+- **テンプレート参照**: 再編成に伴い、すべてのワークフローファイル内のテンプレート参照と前提ドキュメントのパスを更新しました。
+
+## [1.0.5] - 2026-01-27
+
+### 変更
+
+- **メタデータ**: npmでの検索性を向上させるため、`package.json` のキーワードを更新しました（`bdd`, `ddd`, `ai-coding` 等を追加）。
+
+## [1.0.4] - 2026-01-27
+
+### 変更
+
+- **ドキュメント**: README.md をリファクタリングし、より明確でシンプルなセクションタイトルに変更しました。
+- **クリーンアップ**: パッケージを軽量化するため、未使用の `x-` シリーズワークフロー（`x-Dependencies-Update` 等）を削除しました。
+- **パッケージ**: npmパッケージに `README.md` が含まれるように修正しました。

package/README.md

@@ -100,22 +100,23 @@ Why? ─── What? ─── How?
 
 > プロジェクトの立ち上げや、大規模な設計変更時に使用
 
-|  #  | コマンド | 名前                      | 説明                                             |
-| :-: | :------- | :------------------------ | :----------------------------------------------- |
-|  1  | `/a-001` | **Setup Doc Structure**   | ドキュメント構造をセットアップ                   |
-|  2  | `/a-002` | **Initialize Project**    | プロジェクトの目的・課題・スコープを定義         |
-|  3  | `/a-003` | **Create Scenarios**      | ユーザーストーリーをBDD（Gherkin）シナリオに変換 |
-|  4  | `/a-004` | **Define Domain Model**   | Event Stormingでドメインモデルを定義             |
-|  5  | `/a-005` | **Create Domain Diagram** | ドメインモデルを図解（コンテキスト境界・集約）   |
-|  6  | `/a-006` | **Review Req & Domain**   | ⚠️ **要件とドメインモデルの整合性をレビュー**    |
-|  7  | `/a-007` | **Define Tech Stack**     | 技術スタック（言語・FW・DB）を選定               |
-|  8  | `/a-008` | **Define Repo Structure** | リポジトリのディレクトリ構成を定義               |
-|  9  | `/a-009` | **Define Screen Design**  | 画面遷移・UIコンポーネント・Empty Stateを設計    |
-| 10  | `/a-010` | **Define Data Model**     | データベーススキーマ・ER図を設計                 |
-| 11  | `/a-011` | **Define API Spec**       | APIエンドポイント・リクエスト/レスポンスを定義   |
-| 12  | `/a-012` | **Define Architecture**   | アーキテクチャ決定記録（ADR）を作成              |
-| 13  | `/a-013` | **Define Infrastructure** | インフラ構成・非機能要件（RPO/RTO）を定義        |
-| 14  | `/a-014` | **Review Design**         | ⚠️ **全体設計の一貫性をレビュー**                |
+|  #  | コマンド | 名前                      | 説明                                               |
+| :-: | :------- | :------------------------ | :------------------------------------------------- |
+|  1  | `/a-001` | **Setup Doc Structure**   | ドキュメント構造をセットアップ                     |
+|  2  | `/a-002` | **Initialize Project**    | プロジェクトの目的・課題・スコープを定義           |
+|  3  | `/a-003` | **Create Scenarios**      | ユーザーストーリーをBDD（Gherkin）シナリオに変換   |
+|  4  | `/a-004` | **Define Domain Model**   | Event Stormingでドメインモデルを定義               |
+|  5  | `/a-005` | **Create Domain Diagram** | ドメインモデルを図解（コンテキスト境界・集約）     |
+|  6  | `/a-006` | **Review Req & Domain**   | ⚠️ **要件とドメインモデルの整合性をレビュー**      |
+|  7  | `/a-007` | **Define Tech Stack**     | 技術スタック（言語・FW・DB）を選定                 |
+|  8  | `/a-008` | **Define Repo Structure** | リポジトリのディレクトリ構成を定義                 |
+|  9  | `/a-009` | **Define Screen Design**  | 画面遷移・UIコンポーネント・Empty Stateを設計      |
+| 10  | `/a-010` | **Define Design System**  | デザインシステム（カラー、タイポグラフィ等）を定義 |
+| 11  | `/a-011` | **Define Data Model**     | データベーススキーマ・ER図を設計                   |
+| 12  | `/a-012` | **Define API Spec**       | APIエンドポイント・リクエスト/レスポンスを定義     |
+| 13  | `/a-013` | **Define Architecture**   | アーキテクチャ決定記録（ADR）を作成                |
+| 14  | `/a-014` | **Define Infrastructure** | インフラ構成・非機能要件（RPO/RTO）を定義          |
+| 15  | `/a-015` | **Review Design**         | ⚠️ **全体設計の一貫性をレビュー**                  |
 
 > ⚠️ マークのワークフローは**必ず実施**してください。
 

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "yodogawa",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "CLI to install Yodogawa Slash Commands workflows",
   "bin": {
     "yodogawa": "./bin/cli.js"
   },
   "files": [
     "bin",
-    ".windsurf"
+    ".windsurf",
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",