solid-react

React 19 プロジェクトで SOLID 原則と DRY を徹底します。ファイルは 100 行未満（コンポーネントは 50 行未満、フックは 30 行未満、サービスは 40 行未満）、型は `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 を実行します

---

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

実装を始める前に、並行して 3 つのエージェントを起動します。それぞれ、名前を指定した個別の Agent 呼び出しを使用します：

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

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

---

絶対ルール（必須）

1. ファイルは 100 行未満

• 90 行で分割します - 100 行を超えてはいけません
• コンポーネントは 50 行未満（コンポジションを使用）
• フックはそれぞれ 30 行未満
• サービスはそれぞれ 40 行未満

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 つ

   • 90 行でファイルを分割（コンポーネントは 50 行未満、フックは 30 行未満）
   • コンポーネントのコンポジションパターン
   • 分割の方針

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

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

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

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

4. references/interface-segregation.md - 1 つの大きなインターフェースより、用途を絞った複数のインターフェースを優先します

   • 役割別インターフェース
   • props の分離
   • コンテキストの分割

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

   • コンストラクターインジェクションのパターン
   • ファクトリーパターン
   • DI における Context の活用

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

---

コードテンプレート

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

テンプレート	用途	最大行数
component.md	React の関数コンポーネント	50
hook.md	TanStack Query を使用するカスタムフック	30
service.md	依存性注入を使用するサービス	40
store.md	永続化機能を備えた Zustand ストア	40
interface.md	TypeScript インターフェース	-
validator.md	Zod のバリデーションスキーマ	30
factory.md	ファクトリーパターン	40
adapter.md	アダプターパターン	40
error.md	カスタムエラークラス	30
test.md	Vitest + Testing Library	-

---

回答ガイドライン

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

---

禁止事項

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