mcpField
C
composition-patterns

composition-patterns

github.com/blockmatic開発1214 回インストール5 週間前に更新
リポジトリ

composition-patterns について

composition-patterns は React コンポーネント設計のルール集で、コンポジション、複合コンポーネント、明示的なバリアントによる再利用可能な API 設計を案内します。状態の配置や React 19 の ref と use() にも触れ、サーバー側とクライアント側のデータを区別します。

主な機能

  1. 01ブール型 props の増加をコンポジションで回避
  2. 02複雑なコンポーネントに複合構造を採用
  3. 03兄弟間で必要な場合のみクライアント状態を昇格
  4. 04明示的なバリアントと children で構成
  5. 05React 19 の ref と use() の指針

活用シーン

  1. 01ブール型 props が多いコンポーネントのリファクタリング
  2. 02再利用可能なコンポーネントライブラリ API の設計
  3. 03コンポーネント構造と状態管理のレビュー
  4. 04複合コンポーネントやコンテキストプロバイダーの実装

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/blockmatic/basilic-skills --skill composition-patterns

インストール後、Claude Code で/composition-patternsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

metadata.json
README.md
references/
compiled.md
rules/
_sections.md
_template.md
architecture-avoid-boolean-props.md
architecture-compound-components.md
patterns-children-over-render-props.md
patterns-explicit-variants.md
react19-no-forwardref.md
state-context-interface.md
state-decouple-implementation.md
state-lift-state.md

詳細

React のコンポジションパターン

柔軟で保守しやすい React コンポーネントを構築するためのコンポジションパターンです。複合コンポーネント、状態のリフトアップ、内部要素の合成を活用し、真偽値プロパティが増えすぎないようにします。上流：composition-patterns（vercel-labs/agent-skills 内）。

対象範囲

  • 対象：再利用可能なコンポーネント API、複合コンポーネント、明示的なバリアント、React 19 の ref／use() の変更
  • 対象外：ビジュアルデザイン（frontend-design）、Next.js のキャッシュまたは RSC のデータ取得（next-v16、vercel-react）

前提条件

  • 一般的な Basilic アプリでは React 19 以降を使用します。React 18 では React 19 のルールセクションをスキップしてください
  • サーバー／クライアントの境界はすでに存在します。コンポジションによってサーバーデータをクライアント専用プロバイダーに移してはいけません

原則

  • 再利用するコンポーネントでは、真偽値による設定よりコンポジションを優先します
  • クライアント UI の状態をリフトアップするのは、兄弟コンポーネントがその状態を必要とする場合に限ります。サーバーデータはサーバー側に保持します
  • 共有プリミティブを抽出するのは、2 つ目の呼び出し箇所ができてからにします。単発のルート UI では抽出しません

制約

MUST
  • 複合コンポーネントを抽出するのは、共有 UI パッケージまたは 2 つ以上の呼び出し箇所に限ります。単一ルートのリーフコンポーネントでは抽出しません
  • React Server Components にはそれぞれ独自のデータを取得させます。データをクライアントプロバイダーにリフトアップするのではなく、サーバーでレンダリングした子要素をクライアントのリーフコンポーネントに渡します
  • URL で共有できる状態、非同期のサーバー状態、グループ化されたローカル UI 状態は、プロジェクトですでに使用しているライブラリ（クエリー文字列パーサー、TanStack Query、グループ化状態フック）に任せます。汎用的なコンテキスト DI レイヤーに置き換えてはいけません
SHOULD
  • 親が ref を設定する必要がない限り、forwardRef は使用しません
  • 再利用する API で isX の真偽値モードを使う代わりに、明示的なバリアントコンポーネントを使用します
  • renderX プロパティより children を優先します
AVOID
  • 単発の画面に対する時期尚早な抽象化
  • RSC で取得した props を再エクスポートすることだけを目的としたクライアントプロバイダー
  • すべてを「合成」するために、既存の 'use client' の配置を変更すること

関連項目

適用する場面

  • 真偽値プロパティが多数あるコンポーネントをリファクタリングするとき
  • 再利用可能なコンポーネントライブラリを構築するとき
  • 柔軟なコンポーネント API を設計するとき
  • コンポーネントアーキテクチャをレビューするとき
  • 複合コンポーネントやコンテキストプロバイダーを扱うとき

優先度別ルールカテゴリ

優先度カテゴリ影響度接頭辞
1コンポーネントアーキテクチャHIGHarchitecture-
2状態管理MEDIUMstate-
3実装パターンMEDIUMpatterns-
4React 19 APIMEDIUMreact19-

クイックリファレンス

1. コンポーネントアーキテクチャ（HIGH）
  • architecture-avoid-boolean-props — 動作をカスタマイズするために真偽値プロパティを追加せず、コンポジションを使用します
  • architecture-compound-components — 複雑なコンポーネントを共有コンテキストで構成します
2. 状態管理（MEDIUM）
  • state-decouple-implementation — 状態の管理方法を把握するのはプロバイダーだけにします
  • state-context-interface — 依存性注入のために、状態、アクション、メタ情報を備えた汎用インターフェイスを定義します
  • state-lift-state — 兄弟コンポーネントが状態にアクセスできるよう、状態をプロバイダーコンポーネントに移します

これらは、上記の制約で許可されている場合にのみ適用してください。サーバーが所有するデータをリフトアップしてはいけません。

3. 実装パターン（MEDIUM）
  • patterns-explicit-variants — 真偽値モードの代わりに、明示的なバリアントコンポーネントを作成します
  • patterns-children-over-render-props — renderX プロパティの代わりに、コンポジションには children を使用します
4. React 19 API（中）

React 19 以降のみが対象です。React 18 以前では、このセクションをスキップしてください。

  • react19-no-forwardref — 新しいコンポーネントでは forwardRef を使用しないでください。条件付きのコンテキスト読み取りには use() を使用できますが、必須ではありません。useContext() も引き続きサポートされています。

使用方法

詳しい説明とコード例については、個々のルールファイルを参照してください。

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

各ルールファイルには、そのルールが重要な理由、誤った例と正しい例、および補足情報が記載されています。

完全版ガイド（AGENTS.md という名前は付けないでください。Cursor はこのファイル名を常に読み込みます）：references/compiled.md

コメント

Markdown 対応