mcpField
V
vercel-composition-patterns

vercel-composition-patterns

github.com/calesthio開発73.4k1.1k 回インストール2 日前に更新
リポジトリ

vercel-composition-patterns について

再利用可能なコンポーネントを設計・リファクタリングする React 開発者向けのコンポジションパターン集です。複合コンポーネントや共有状態の Provider、ブール型 props に頼らない構成を扱います。

主な機能

  1. 01複合コンポーネントの設計
  2. 02Provider による状態管理
  3. 03明示的なコンポーネントバリアント
  4. 04children によるコンポジション
  5. 05React 19 API の指針

活用シーン

  1. 01ブール型 props が多いコンポーネントの改修
  2. 02再利用可能なコンポーネントライブラリの設計
  3. 03コンポーネントアーキテクチャのレビュー

インストール

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

$npx skills add https://github.com/calesthio/openmontage --skill vercel-composition-patterns

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

同梱ファイル

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

AGENTS.md
README.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 コンポーネントを構築するためのコンポジションパターンです。コンパウンドコンポーネントや状態のリフトアップ、内部要素のコンポジションを活用して、ブール値の props が増え続けるのを避けます。これらのパターンを使うと、コードベースが大規模になっても、人間にも AI エージェントにも扱いやすくなります。

参考情報： このディレクトリの AGENTS.md は、Vercel から取り込んだ詳細な上流ガイドです。これはこのスキルだけを対象とする補足資料であり、読み込み可能なエントリーポイントであり、正とされるのは SKILL.md です。リポジトリルートの AGENTS.md／AGENT_GUIDE.md を上書きしたり、拡張したりするものではありません。

適用する場面

以下のような場合に、これらのガイドラインを参照してください。

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

優先度別のルールカテゴリ

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

クイックリファレンス

1. コンポーネントアーキテクチャ（HIGH）
  • architecture-avoid-boolean-props - 動作をカスタマイズするためにブール値の 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 props の代わりに children を使って コンポジションする
4. React 19 API（MEDIUM）

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

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

使い方

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

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

各ルールファイルには、以下の内容が含まれています。

  • 重要な理由の簡単な説明
  • 誤ったコード例とその説明
  • 正しいコード例とその説明
  • 追加の背景情報と参考資料

コンパイル済みドキュメント全文

すべてのルールを展開したガイド全文については、AGENTS.md を参照してください。

コメント

Markdown 対応