yodogawa 2.1.0 → 2.1.3

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

@@ -1,106 +1,103 @@
----
-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/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`（存在する場合）
-
-不足があれば対応スキル（`/a-002`, `/a-003`, `/a-007`）の実行を促す。
-
-### 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、設定等）を追加提案。
-- 「[画面名] (役割: [説明])」の形式で一覧化。
-
-画面一覧のテーブル例は [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/design/03-screen-design.md` に以下を記入する:
-
-- 画面一覧テーブル
-- 画面遷移図（Mermaid）
-- レスポンシブデザインポリシー
-
-### 7. 構造チェック
-
-```bash
-grep "## 画面一覧" docs/project/design/03-screen-design.md \
-  && grep "\`\`\`mermaid" docs/project/design/03-screen-design.md \
-  && grep "## レスポンシブデザインポリシー" docs/project/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/design/03-screen-design.md
-git commit -m "docs: 画面設計ドキュメントの作成"
-```
-
-## 完了条件
-
-- `docs/project/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 追加例
+---
+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. テンプレートの準備
+
+このスキルの配置ディレクトリ（`skills/a-009-define-screen-design/`）を起点に、相対パス `../../templates/project/04-design/03-screen-design.md` を Read で読み込み、その内容を `docs/project/04-design/03-screen-design.md` へ Write する。出力先が既に存在する場合は上書きせずスキップして報告する（冪等）。出力先ディレクトリ（`docs/project/04-design/`）が無ければ作成する。
+
+### 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/reference/structure-check.md

@@ -6,16 +6,16 @@ SKILL.md 手順7〜8 で使う確認コマンドとレビュー観点。
 
 ```bash
 # 画面一覧セクションの確認
-grep "## 画面一覧" docs/project/design/03-screen-design.md && echo "OK" || echo "MISSING: Screen list"
+grep "## 画面一覧" docs/project/04-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 "\`\`\`mermaid" docs/project/04-design/03-screen-design.md && echo "OK" || echo "MISSING: Flowchart"
 # レスポンシブポリシーの確認
-grep "## レスポンシブデザインポリシー" docs/project/design/03-screen-design.md && echo "OK" || echo "MISSING: Responsive policy"
+grep "## レスポンシブデザインポリシー" docs/project/04-design/03-screen-design.md && echo "OK" || echo "MISSING: Responsive policy"
 ```
 
 ## チェックリスト
 
-- [ ] `docs/project/design/03-screen-design.md` が作成されている
+- [ ] `docs/project/04-design/03-screen-design.md` が作成されている
 - [ ] 主要な画面がすべて網羅されている
 - [ ] 各画面の URL パスとアクセス権限が定義されている
 - [ ] Empty State / Loading / Error の各状態が考慮されている
@@ -33,7 +33,7 @@ grep "## レスポンシブデザインポリシー" docs/project/design/03-scre
 ## Git への追加（任意）
 
 ```bash
-git add docs/project/design/03-screen-design.md
+git add docs/project/04-design/03-screen-design.md
 git status
 ```
 

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

@@ -1,134 +1,130 @@
----
-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) — コンポーネント・アイコン・アニメーションの標準仕様
+---
+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/04-design/03-screen-design.md` が作成されている（画面設計完了）
+- `docs/project/04-design/01-tech-stack.md` が作成されている（UI フレームワーク決定）
+
+## 手順
+
+### 1. 既存ドキュメントの確認
+
+- `docs/project/04-design/01-tech-stack.md` — 使用する CSS フレームワーク（Tailwind, MUI 等）
+- `docs/project/04-design/03-screen-design.md` — 画面設計とレスポンシブポリシー
+- ブランドガイドラインがあれば参照
+
+### 2. テンプレートの準備
+
+このスキルの配置ディレクトリ（`skills/a-010-define-design-system/`）を起点に、相対パス `../../templates/project/04-design/04-design-system.md` を Read で読み込み、その内容を `docs/project/04-design/04-design-system.md` へ Write する。出力先が既に存在する場合は上書きせずスキップして報告する（冪等）。出力先ディレクトリ（`docs/project/04-design/`）が無ければ作成する。
+
+### 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/04-design/04-design-system.md` に以下を必須セクションとして記入:
+
+- カラーパレット
+- タイポグラフィ
+- スペーシング
+- コンポーネントスタイル（主要なもの）
+
+### 10. 完了条件の確認
+
+- [ ] `04-design-system.md` が作成されている
+- [ ] カラーパレットが定義されている
+- [ ] タイポグラフィスケールが定義されている
+- [ ] スペーシングシステムが定義されている
+- [ ] 主要コンポーネント（ボタン、フォーム）のスタイルが定義されている
+
+### 11. Git への追加（オプション）
+
+```bash
+git add docs/project/04-design/04-design-system.md
+git status
+```
+
+推奨コミットメッセージ:
+
+```
+docs: デザインシステムの定義
+
+- カラーパレット、タイポグラフィ、スペーシングを定義
+- 主要コンポーネントのスタイルガイドを追加
+```
+
+## 完了条件
+
+- `docs/project/04-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) — コンポーネント・アイコン・アニメーションの標準仕様