Reactコンポジションパターン
柔軟で保守性の高いReactコンポーネントを構築するためのコンポジションパターン。ブール値のプロップが乱立するのを避けるために、複合コンポーネント、状態の引き上げ、内部のコンポジションを活用します。これらのパターンにより、コードベースは人間とAIエージェントの両方にとってスケールしやすくなります。
適用するタイミング
以下のガイドラインを参考にしてください：
- 多くのブール値プロップを持つコンポーネントをリファクタリングする場合
- 再利用可能なコンポーネントライブラリを構築する場合
- 柔軟なコンポーネントAPIを設計する場合
- コンポーネントアーキテクチャをレビューする場合
- 複合コンポーネントやコンテキストプロバイダーを扱う場合
ルールカテゴリ（優先順位順）
| 優先度 | カテゴリ | インパクト | プレフィックス |
|---|---|---|---|
| 1 | コンポーネントアーキテクチャ | 高 | architecture- |
| 2 | 状態管理 | 中 | state- |
| 3 | 実装パターン | 中 | patterns- |
| 4 | React 19 API | 中 | react19- |
クイックリファレンス
1. コンポーネントアーキテクチャ（高）
architecture-avoid-boolean-props- 動作をカスタマイズするためにブール値プロップを追加しないでください。代わりにコンポジションを使用します。architecture-compound-components- 複雑なコンポーネントを共有コンテキストで構成します。
2. 状態管理（中）
state-decouple-implementation- プロバイダーのみが状態の管理方法を知っているようにします。state-context-interface- 状態、アクション、メタを含むジェネリックインターフェースを定義し、依存性注入を行います。state-lift-state- 状態をプロバイダーコンポーネントに引き上げ、兄弟間でアクセスできるようにします。
3. 実装パターン（中）
patterns-explicit-variants- ブール値モードの代わりに、明示的なバリアントコンポーネントを作成します。patterns-children-over-render-props- renderXプロップの代わりに子要素を使ってコンポジションを行います。
4. React 19 API（中）
⚠️ React 19+ のみ。 React 18以前を使用している場合はこのセクションをスキップしてください。
react19-no-forwardref-forwardRefを使用せず、useContext()の代わりにuse()を使用します。
使い方
個別のルールファイルには、詳細な説明とコード例が含まれています：
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md
各ルールファイルには以下が含まれます：
- なぜ重要なのかの簡単な説明
- 不適切なコード例とその説明
- 正しいコード例とその説明
- 追加のコンテキストと参照情報
完全なコンパイルドキュメント
すべてのルールを展開した完全ガイド：AGENTS.md