solid-react

React 19 プロジェクトで SOLID および DRY のアーキテクチャを徹底します。ソースファイルを `FUSE_SOLID_MAX_LINES` 以内に収め、凝集度が低下した場合は責務ごとに分割します。型は `modules/[feature]/src/interfaces/` に分離し（コンポーネントファイル内には置きません）、エクスポートには JSDoc を必須とします。また、クラスコンポーネントは禁止し、新しいコードを書く前に既存のロジックやユーティリティを必ず grep で検索します（`jscpd` による重複チェックも行います）。

SOLID の各原則に対応した専用のリファレンスガイド（SRP のファイル分割、OCP のコンポジション／レンダープロップ、LSP の契約遵守、ISP のロールベースの props／コンテキスト、DIP の Context 経由のコンストラクターインジェクション）に加え、コンポーネント、フック、サービス、ストア、バリデーター、ファクトリー、テストを網羅した、すぐにコピーして使えるテンプレートを 10 個提供します。これは横断的なコード品質スキルであり、機能別のスキルではありません。React API 自体については、react-19、react-state、react-forms、react-tanstack-router を参照してください。

SOLID React - コンポーネントアーキテクチャ

コードベースの分析（必須）

実装を始める前に必ず行うこと：

1. プロジェクトの構造を調べ、アーキテクチャを把握します
2. 関連する既存ファイルを読み、確立されたパターンに従います
3. 命名規則、コーディングスタイル、使用されているパターンを特定します
4. データフローと依存関係を把握します

DRY - 再利用するか共有コードを作成する（必須）

新しいコードを書く前に必ず行うこと：

1. 関数名、パターン、ロジックが似ている箇所をコードベース内で grep して検索します
2. 共有コードの配置先を確認します：modules/cores/lib/、modules/cores/components/、modules/cores/hooks/
3. 類似コードがある場合 → 重複させず、拡張または再利用します
4. 2 つ以上の機能でコードを使用する場合 → 直接 modules/cores/ に作成します
5. 繰り返し使われるロジック（3 回以上）は共有ヘルパーに抽出します
6. 新しいファイルを作成した後、npx jscpd ./src --threshold 3 を実行します

---

エージェントのワークフロー（必須）

実装を始める前に、各項目について name を指定し、それぞれ 1 回ずつ Agent を呼び出して、3 つのエージェントを並列で起動します。

1. fuse-ai-pilot:explore-codebase - プロジェクトの構造と既存のパターンを分析します
2. fuse-ai-pilot:research-expert - スタックで使用するすべてのテクノロジーの最新ドキュメントを確認します
3. mcp__context7__query-docs - 統合の互換性を確認します

実装後、検証のために fuse-ai-pilot:sniper を実行します。

---

絶対ルール（必須）

1. ソースファイルの最大行数

• ソースファイルは FUSE_SOLID_MAX_LINES を超えてはなりません。上限を定める権威はフックのみです
• 凝集度が低下した場合は責務ごとに分割します（コンポーネントはコンポジション、フック、サービスを活用します）

2. モジュラーアーキテクチャ

機能モジュールと cores ディレクトリを含む完全な構成については、references/architecture-patterns.md を参照してください。

3. JSDoc は必須

/**
 * Fetch user by ID from API.
 *
 * @param id - User unique identifier
 * @returns User object or null if not found
 */
export async function getUserById(id: string): Promise<User | null>

4. インターフェースを分離する

modules/[feature]/src/interfaces/
├── user.interface.ts
├── post.interface.ts
└── api.interface.ts

インターフェースをコンポーネントファイル内に置いてはなりません。

---

SOLID 原則（詳細ガイド）

SOLID の各原則には専用のリファレンスガイドがあります。

1. references/single-responsibility.md - 1 つの関数に変更理由は 1 つ

   • FUSE_SOLID_MAX_LINES 以内での責務に基づく分割
   • コンポーネントのコンポジションパターン
   • 分割戦略

2. references/open-closed.md - 変更ではなくコンポジションによって拡張します

   • プラグインアーキテクチャのパターン
   • レンダープロップとスロット
   • ストラテジーパターン

3. references/liskov-substitution.md - 契約の遵守と振る舞いのサブタイピング

   • インターフェースの契約
   • 差し替え可能な実装
   • 遵守状況のテスト

4. references/interface-segregation.md - 1 つの肥大化したインターフェースより、目的を絞った複数のインターフェースを使います

   • ロールベースのインターフェース
   • props の分離
   • Context の分割

5. references/dependency-inversion.md - 実装ではなく抽象に依存します

   • コンストラクターインジェクションのパターン
   • ファクトリーパターン
   • DI のための Context

概要とクイックリファレンスについては、references/solid-principles.md を参照してください。

---

コードテンプレート

references/templates/ にすぐにコピーして使えるコードがあります。

テンプレート	用途
component.md	React の関数コンポーネント
hook.md	TanStack Query を使ったカスタムフック
service.md	依存性注入を使ったサービス
store.md	永続化機能付き Zustand ストア（最大 40 行、オーナールール）
interface.md	TypeScript のインターフェース
validator.md	Zod の検証スキーマ
factory.md	ファクトリーパターン
adapter.md	アダプターパターン
error.md	カスタムエラークラス
test.md	Vitest + Testing Library

すべてのテンプレートは FUSE_SOLID_MAX_LINES の範囲内に収まっています。

---

応答ガイドライン

1. まず調査する - 必須：コードを書く前に必ず Context7 + Exa で検索する
2. コード全体を示す - 断片ではなく、動作する例を示す
3. 判断の理由を説明する - 代替案よりこのパターンを選ぶ理由を説明する
4. テストを含める - 常にテストケースを提案する
5. エラーに対処する - 決して無視せず、エラーバウンダリを使う
6. すべてに型を付ける - 完全な TypeScript を使い、any は使わない
7. コードを文書化する - 複雑な関数には JSDoc を付ける

---

禁止事項

• ドキュメントを先に調査せずにコーディングすること（必ず調査する）
• 現行の年のドキュメントを確認せずに古い API を使うこと
• FUSE_SOLID_MAX_LINES を超えるソースファイル
• コンポーネントファイル内のインターフェース
• コンポーネント内のビジネスロジック
• クラスコンポーネント
• エクスポートへの JSDoc の付け忘れ
• any 型
• バレルエクスポート（index.ts による再エクスポート）
• データ取得に useEffect を使うこと（TanStack Query または Router ローダーを使う）
• 他のモジュールをインポートするモジュール（コアを除く）
• 既存のユーティリティ／ヘルパーを、先に Grep で検索せずに重複して作ること
• 共通関数に切り出さず、ロジックブロックをコピー＆ペーストすること