vercel-composition-patterns

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 プロパティではなく、 コンポジションには children を使用する

4. React 19 API（中）

⚠️ React 19 以降のみ。 React 18 以前を使用している場合は、このセクションをスキップしてください。

• react19-no-forwardref - forwardRef を使用せず、useContext() の代わりに use() を使用する

使用方法

まず、プロジェクトのルートで実行します。

npx -y @pymodel/react-frontend-skills scan --skill vercel-composition-patterns  # deprecated APIs → rule IDs

上記のルールのうちタスクに該当するものと、scan で検出された各項目について、rules/<rule-id>.md を読み、重要な理由と、誤ったコードと正しいコードを確認してください。