yodogawa 1.0.0

package/.windsurf/workflows/x-Code-ResearchAndReview.md

@@ -0,0 +1,78 @@
+---
+description: 公式ドキュメントと公認サンプルを調査してから実装を検証するリサーチ駆動型コードレビューワークフロー
+auto_execution_mode: 1
+---
+
+# Code-ResearchAndReview (x-Code-ResearchAndReview)
+
+## 目的
+
+- 変更対象のライブラリやフレームワークについて公式情報・公認サンプルを収集し、正しい実装手順を明確化する。
+- 既存コードと変更内容をリサーチ結果と照合し、欠落・誤り・ベストプラクティス逸脱を検出する。
+- 必要な修正案と検証手順を提示し、信頼性の高いコードレビュー結果を提供する。
+
+## 前提
+
+- 対象リポジトリの最新ブランチを取得済みで、差分確認ツール（`git diff` 等）が利用できる。
+- 公式ドキュメント／ベンダーブログ／公認サンプルリポジトリへアクセスでき、ライセンス上の制約がない。
+- `fetch` MCP や `search_web` MCP、必要に応じて `sequential-thinking` MCP が許可されている。
+- DeepWiki MCP や Context7 MCP を利用する場合は、組織のナレッジベースとの連携ポリシーを確認しておく。
+- 静的解析ツールやテストスイート（`run_command` 経由）が実行できる環境が整っている。
+- 機密コードを外部に送信できない場合は、外部リサーチ時にコンテキストを要約するなど情報保護ポリシーを遵守する。
+
+## 手順
+
+1. **変更差分と要求の把握**
+
+   - 依頼メッセージ・仕様書・チケットを確認し、期待挙動と制約を要約する。
+   - `git diff` やレビュー UI で変更ファイルと重要な関数／コンポーネントを特定する。
+
+2. **リサーチ計画の立案**
+
+   - 変更で利用する主要ライブラリ・API・設計パターンを列挙し、リサーチ優先度（必須／確認／参考）を決める。
+   - 公式ドキュメント、リリースノート、公認サンプルリポジトリ、信頼できるベストプラクティス記事を候補として洗い出す。
+
+3. **情報収集（一次ソース優先）**
+
+   - `fetch` や `search_web` MCP で公式ドキュメントを取得し、該当 API／コンポーネントの推奨実装・制約・注意点をメモする。
+   - DeepWiki MCP や Context7 MCP で社内Wikiや関連知識ベースを照会し、既存実績や組織独自のベストプラクティスを確認する。
+   - ベンダーやメンテナが公開しているサンプルリポジトリを確認し、同様のユースケースのコード断片を収集する。
+   - 必要に応じて `sequential-thinking` MCP で観点を再整理し、調査漏れがないかチェックする。
+
+4. **ベストプラクティスチェックリストの作成**
+
+   - 収集した知見から「必須要件」「推奨パターン」「避けるべきアンチパターン」を箇条書きで整理する。
+   - バージョン依存や互換性注意事項がある場合はバージョン番号とともに記録する。
+
+5. **実装の照合**
+
+   - 変更コードと既存コードをチェックリストと比較し、未遵守項目や差分を洗い出す。
+   - 公式サンプルとの差分がある場合は理由を推測し、必要なら開発者へ確認すべき論点としてメモする。
+   - スタティックリソース（型定義、設定ファイル）も対象に含め、依存関係や設定値がベストプラクティス通りか確認する。
+
+6. **実行検証**
+
+   - `run_command` で静的解析（Ruff、ESLint 等）やテスト（`npm test`、`pytest` など）を実行し、リサーチ結果と矛盾する警告・失敗がないか確認する。
+   - Web UI や API の挙動を確認する必要があれば Playwright MCP や Chrome DevTools MCP で再現テスト・ログ取得を行う。
+
+7. **レビュー結果の整理**
+
+   - リサーチに基づく遵守状況、検出した問題、推奨修正案、追加で確認すべき質問事項をまとめる。
+   - 修正提案には参照元（公式ドキュメント URL、サンプルファイルパス等）を添付し、根拠を明確にする。
+
+8. **フォローアップと共有**
+
+   - レビューコメントやレポート形式に落とし込み、開発者へ共有する。
+   - 未解決の質問や追加検証が必要な項目を TODO として記録し、回答期限とオーナーを設定する。
+
+## 完了条件
+
+- 公式情報に基づくチェックリストと比較結果が整理され、根拠付きでレビューコメントを提示できている。
+- 必要な修正案・テスト結果・未解決事項が明文化され、関係者と共有済みである。
+- リサーチで得た参考リンクやサンプルが記録され、再利用可能な知見として残っている。
+
+## エスカレーション
+
+- 公式情報が見つからず実装方針を確定できない場合は、ライブラリメンテナ／プロダクトオーナーへ確認を依頼する。
+- ライセンスやセキュリティ上の懸念がある実装が見つかった場合は、セキュリティチームや法務担当へ速やかに報告する。
+- 大規模な設計変更が必要と判断した場合は、アーキテクトやリードエンジニアとレビュー会議を設定する。

package/.windsurf/workflows/x-Component-Create.md

@@ -0,0 +1,359 @@
+---
+description: UIコンポーネントをボイラープレート、型定義、ストーリー、テストと共に生成するワークフロー
+auto_execution_mode: 1
+---
+
+# Component-Create (x-Component-Create)
+
+## 目的
+
+- UI コンポーネントを素早く作成し、開発効率を向上させる。
+- Props/型定義、ストーリー/プレビュー、テストファイルを一括で生成する。
+- プロジェクトの命名規則とディレクトリ構造に従ったコンポーネントを作成する。
+- 設計パターン（Atomic Design, Feature-Sliced Design等）に対応する。
+
+## 前提
+
+- UI フレームワークがセットアップされている（React, Vue, Svelte, Solid等）。
+- 型システムが使用されている（TypeScript推奨）。
+- コンポーネントストーリー/プレビューツールがセットアップされている（Storybook, Histoire等、オプション）。
+- テストフレームワークがセットアップされている（Jest, Vitest, Testing Library等、オプション）。
+- プロジェクトの命名規則とディレクトリ構造が決まっている。
+
+## 手順
+
+### 1. コンポーネント設計の決定
+
+**コンポーネントの種類**:
+- **プレゼンテーショナル**: UI表示のみ、ロジックなし
+- **コンテナ**: データ取得やステート管理を含む
+- **レイアウト**: ページ構造を定義
+- **ユーティリティ**: 再利用可能な小さなコンポーネント
+
+**設計パターン**:
+- **Atomic Design**: Atoms → Molecules → Organisms → Templates → Pages
+- **Feature-Sliced Design**: features/{feature}/ui/
+- **Flat Structure**: components/
+- **Domain-Driven**: domains/{domain}/components/
+
+**命名規則**:
+- PascalCase（例: `UserCard`, `NavigationBar`）
+- 明確で説明的な名前
+- 単数形または複数形を適切に使い分け
+
+### 2. ディレクトリ構造の決定
+
+**一般的なパターン**:
+
+**単一ファイル**:
+```
+src/components/Button.tsx
+```
+
+**コロケーション**（推奨）:
+```
+src/components/Button/
+├── Button.tsx              # メインコンポーネント
+├── Button.module.css       # スタイル
+├── Button.stories.tsx      # ストーリー/プレビュー
+├── Button.test.tsx         # テスト
+└── index.ts                # エクスポート
+```
+
+**複雑なコンポーネント**:
+```
+src/components/UserCard/
+├── UserCard.tsx
+├── UserCard.module.css
+├── UserCard.stories.tsx
+├── UserCard.test.tsx
+├── components/             # サブコンポーネント
+│   ├── Avatar.tsx
+│   └── UserInfo.tsx
+├── hooks/                  # カスタムフック
+│   └── useUserData.ts
+└── index.ts
+```
+
+### 3. コンポーネントファイルの作成
+
+**基本構造**:
+
+1. **インポート**: 必要な依存関係
+2. **型定義**: Props の interface/type
+3. **コンポーネント本体**: JSX/テンプレート
+4. **エクスポート**: デフォルトまたは名前付き
+
+**Props 設計のチェックリスト**:
+- [ ] 必須プロパティと任意プロパティを明確に区別
+- [ ] デフォルト値を適切に設定
+- [ ] 型定義にドキュメントコメントを追加
+- [ ] イベントハンドラの命名を統一（onClick, onSubmit等）
+- [ ] children または slot の使用を検討
+- [ ] as/component prop でポリモーフィズムを実現（必要に応じて）
+
+**アクセシビリティチェックリスト**:
+- [ ] セマンティックHTML要素を使用（button, nav, main等）
+- [ ] ARIA属性を適切に設定
+- [ ] キーボードナビゲーションをサポート
+- [ ] フォーカス管理を実装
+- [ ] スクリーンリーダー対応のラベルを追加
+
+### 4. スタイリングの実装
+
+**スタイリング手法の選択**:
+- **CSS Modules**: スコープ付きCSS、設定不要
+- **CSS-in-JS**: styled-components, Emotion, Vanilla Extract
+- **Utility-First**: Tailwind CSS, UnoCSS
+- **CSS Preprocessor**: Sass, Less
+- **CSS Framework**: Bootstrap, Chakra UI, Material UI
+
+**レスポンシブデザイン**:
+- モバイルファースト設計
+- ブレークポイントの定義
+- フレキシブルレイアウト（Flexbox, Grid）
+
+### 5. ストーリー/プレビューの作成
+
+**目的**:
+- コンポーネントの全バリエーションを可視化
+- 開発中の動作確認
+- デザインレビュー
+- ドキュメント生成
+
+**作成すべきストーリー**:
+- **デフォルト**: 基本的な使用例
+- **バリエーション**: すべての props の組み合わせ
+- **状態**: loading, error, empty等
+- **エッジケース**: 長いテキスト、空データ等
+
+**ストーリーの構造**:
+```typescript
+// 例: Storybook形式
+export default {
+  title: 'Components/Button',
+  component: Button,
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: { control: 'select', options: ['primary', 'secondary'] },
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+  },
+};
+
+export const Primary = {
+  args: { label: 'Button', variant: 'primary' },
+};
+
+export const Secondary = {
+  args: { label: 'Button', variant: 'secondary' },
+};
+```
+
+### 6. テストの作成
+
+**テスト戦略**:
+- **ユニットテスト**: コンポーネントの動作を検証
+- **スナップショットテスト**: UI の変更を検出
+- **インタラクションテスト**: ユーザー操作をシミュレート
+- **アクセシビリティテスト**: a11y 準拠を確認
+
+**テストケースの例**:
+```typescript
+describe('Button', () => {
+  // レンダリングテスト
+  it('renders with label', () => {
+    render(<Button label="Click me" />);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  // インタラクションテスト
+  it('calls onClick when clicked', () => {
+    const handleClick = jest.fn();
+    render(<Button label="Click me" onClick={handleClick} />);
+    fireEvent.click(screen.getByText('Click me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  // 状態テスト
+  it('does not call onClick when disabled', () => {
+    const handleClick = jest.fn();
+    render(<Button label="Click me" onClick={handleClick} disabled />);
+    fireEvent.click(screen.getByText('Click me'));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  // バリエーションテスト
+  it('applies variant class', () => {
+    const { rerender } = render(<Button label="Button" variant="primary" />);
+    expect(screen.getByText('Button')).toHaveClass('primary');
+  });
+
+  // アクセシビリティテスト
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Button label="Click me" />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+```
+
+### 7. Index ファイルの作成
+
+**エクスポートパターン**:
+```typescript
+// Named export（推奨）
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+// Re-export with types
+export { Button, type ButtonProps } from './Button';
+
+// Default export
+export { default } from './Button';
+```
+
+### 8. ドキュメント化
+
+**JSDocコメントの追加**:
+```typescript
+/**
+ * ボタンコンポーネント
+ *
+ * @example
+ * ```tsx
+ * <Button label="Click me" variant="primary" onClick={handleClick} />
+ * ```
+ */
+export interface ButtonProps {
+  /** ボタンのラベル */
+  label: string;
+  /** ボタンのバリエーション @default 'primary' */
+  variant?: 'primary' | 'secondary' | 'danger';
+  /** クリックイベントハンドラ */
+  onClick?: () => void;
+}
+```
+
+**README または Storybook Docs**:
+- 使用例
+- Props の説明
+- アクセシビリティガイドライン
+- カスタマイズ方法
+
+### 9. 動作確認
+
+**確認項目**:
+- [ ] コンポーネントが正しくレンダリングされる
+- [ ] すべての props が機能する
+- [ ] イベントハンドラが正しく動作する
+- [ ] スタイルが適用されている
+- [ ] レスポンシブデザインが機能する
+- [ ] アクセシビリティ要件を満たしている
+- [ ] テストがすべて通る
+
+**ストーリー/プレビューツールでの確認**:
+```bash
+# Storybook
+npm run storybook
+
+# Histoire (Vite)
+npm run story:dev
+```
+
+**テストの実行**:
+```bash
+npm test Button
+# または
+npm test -- Button.test.tsx
+```
+
+### 10. Git コミット
+
+```bash
+git add src/components/Button/
+
+git commit -m "feat: add Button component
+
+- Add Button component with variants (primary, secondary, danger)
+- Add size options (small, medium, large)
+- Add component stories/preview
+- Add unit tests with testing library
+- Support accessibility features (ARIA, keyboard navigation)
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+
+Co-Authored-By: Claude <noreply@anthropic.com>"
+```
+
+## 完了条件
+
+- コンポーネントファイルが作成されている
+- Props 型定義が記述されている
+- スタイルが実装されている
+- ストーリー/プレビューが作成されている（使用している場合）
+- テストファイルが作成され、テストが通る
+- Index ファイルでエクスポートされている
+- アクセシビリティ要件を満たしている
+- ドキュメントが記述されている
+
+## エスカレーション
+
+- **命名規則の不一致**:
+  - プロジェクトの命名規則を確認
+  - チーム内で合意を取る
+  - ESLint ルールで強制
+
+- **ディレクトリ構造の不一致**:
+  - プロジェクトのアーキテクチャパターンを確認
+  - 既存コンポーネントと整合性を取る
+
+- **テストが失敗する**:
+  - import パスを確認
+  - テストライブラリのバージョンを確認
+  - Mock が必要な依存関係を確認
+
+- **ストーリー/プレビューが表示されない**:
+  - 設定ファイルを確認
+  - import パスを確認
+  - エクスポートを確認
+
+## ベストプラクティス
+
+- **Props の型定義**: すべての Props に型と説明を追加
+- **デフォルト値**: Props にデフォルト値を設定
+- **アクセシビリティ**: ARIA 属性を適切に設定
+- **テストカバレッジ**: Props のすべてのバリエーションをテスト
+- **ストーリー/プレビュー**: すべてのバリエーションを可視化
+- **再利用性**: 汎用的で再利用可能なコンポーネントを設計
+- **ドキュメント**: JSDoc コメントで使用方法を記載
+- **命名**: 説明的で一貫性のある命名
+- **分離**: プレゼンテーショナルとコンテナを分離
+- **パフォーマンス**: メモ化を適切に使用
+
+## 参考: 技術スタック別のパターン
+
+**UI フレームワーク**:
+- React, Preact
+- Vue 3, Nuxt 3
+- Svelte, SvelteKit
+- Solid.js, Qwik
+- Angular, Lit
+
+**スタイリング**:
+- CSS Modules
+- styled-components, Emotion
+- Tailwind CSS, UnoCSS
+- Vanilla Extract, Panda CSS
+- Sass, Less, PostCSS
+
+**ストーリー/プレビュー**:
+- Storybook
+- Histoire (Vite)
+- Ladle
+- Component Story Format (CSF)
+
+**テスティング**:
+- Jest, Vitest
+- React Testing Library, Vue Testing Library
+- Playwright, Cypress
+- jest-axe (アクセシビリティ)

package/.windsurf/workflows/x-Context-CatchUp.md

@@ -0,0 +1,63 @@
+---
+description: 仕様と既存実装を照らし合わせてギャップ・リスク・依存関係を把握し、実行可能な分析結果をまとめるワークフロー
+auto_execution_mode: 1
+---
+
+# Context-CatchUp (x-Context-CatchUp)
+
+## 目的
+
+- 最新の仕様・要求・ユーザーストーリーを整理し、現行実装とのギャップを可視化する。
+- 依存関係・リスク・制約を分析し、計画段階で必要な前提条件やブロッカーを特定する。
+- 具体的な改善提案やフォローアップタスクを提示し、次フェーズ（設計・実装・計画）の意思決定を支援する。
+
+## 前提
+
+- 対象プロジェクトの仕様書、ユーザーストーリー、テクニカルドキュメント、コードリポジトリへアクセスできること。
+- リポジトリの README やガイドライン、関連するワークフローが最新化されていること。
+- 分析結果を共有するチャンネル（Issue, PR, Wiki 等）とレビュー担当者が明確であること。
+- 機密情報を扱う場合は、アクセス権限や情報共有の範囲について組織ポリシーを遵守する。
+
+## 手順
+
+1. **コンテキスト同期**
+   - 依頼内容、最近の仕様変更、関連 Issue/PR、設計ドキュメントを収集し、背景と目的を要約する。
+   - `run_command` や Repo Index MCP を使って関連ファイル・モジュールの一覧を取得し、分析対象のスコープを確定する。
+
+2. **仕様・要求キュレーション**
+   - ユーザーストーリー、ユースケース、機能要件・非機能要件を整理し、優先度や依存関係を明記する。
+   - 明文化されていない前提（対象ユーザー、データフロー、法的制約など）がないかチェックし、暫定仮定として記録する。
+
+3. **現行実装レビュー**
+   - 対象領域のコード構造、データモデル、テストカバレッジを確認し、仕様との整合性を評価する。
+   - `run_command` で静的解析（Ruff / ESLint 等）やテストを実行し、品質指標・警告・脆弱性を収集する。
+   - UI/UX の確認が必要な場合は Playwright MCP または Chrome DevTools MCP で現状の挙動を記録する。
+
+4. **ギャップ＆リスク分析**
+   - 仕様 vs 実装の差分、曖昧な仕様、技術的負債、依存サービスの制約をリスト化する。
+   - 影響度（High/Medium/Low）と発生確率、回避策・緩和策を併記し、対応優先度を整理する。
+
+5. **データ・イベント・UX 観点の整理**
+   - 入出力データ、API 契約、イベントハンドリング、UI フローなど観点別に確認し、抜け漏れを洗い出す。
+   - ドメインイベントや KPI 計測の要否を評価し、必要な計測項目や監視設定を提案する。
+
+6. **改善提案とフォローアップ計画**
+   - 明らかになった課題に対して、推奨アクション（仕様補強、リファクタリング、追加テストなど）を記述する。
+   - 未解決の質問や意思決定事項をまとめ、回答期限とオーナーを設定する。
+   - 後続フェーズのために `/speckit.plan` や `/speckit.tasks` に渡すべき入力（前提・制約・リスク）を整理する。
+
+7. **サマリー共有**
+   - 背景・分析結果・推奨策・未決事項を 1 ページ程度にまとめ、合意形成用のドキュメントとして共有する。
+   - 合意が必要なポイントはチェックリスト化し、レビュー／承認手順を明確にする。
+
+## 完了条件
+
+- 仕様と実装の差分、リスク、未解決事項が整理され、優先度とオーナーが設定されている。
+- 改善提案とフォローアップタスクが明文化され、次フェーズで利用可能な状態になっている。
+- 分析サマリーが関係者に共有され、承認フローや回答期限が確立されている。
+
+## エスカレーション
+
+- 重大な仕様ギャップやリスクが発覚し、スケジュール影響が大きい場合はプロダクトオーナー／マネージャーへ即時報告する。
+- セキュリティ・法務・プライバシー要件が不明瞭な場合は、専門チームへ照会し自己判断で進めない。
+- コミュニケーションが停滞して分析が進行しないときは、チームリードへ状況共有し、回答者の再アサインや意思決定会議を依頼する。