vercel-composition-patterns

vercel-composition-patterns skill の概要

vercel-composition-patterns は、prop を大量に持つコンポーネント API よりも composition を選ぶための React アーキテクチャ skill です。boolean prop の増殖を減らし、コンポーネントの境界を明確にし、呼び出し側を壊さずに再利用可能な API を拡張しやすくしたい frontend エンジニア、デザインシステムの作者、AI を使ったリファクタリング作業に特に向いています。

vercel-composition-patterns skill の主な価値は、意思決定の支援にあります。単一の設定可能なコンポーネントにすべてを押し込むのではなく、compound components、lifted state、明示的な variants、children composition、React 19 固有の API のどれを使うべきかを判断する助けになります。

frontend コンポーネント設計に最適な場面

vercel-composition-patterns for Frontend Development を使うべきなのは、次のようなときです。

• boolean やモードフラグが多すぎるコンポーネントをリファクタリングしたい
• 再利用可能な UI kit やプロダクト用のコンポーネントライブラリを作っている
• コンポーネント API が硬すぎる、または魔法っぽすぎるかを見直したい
• 共有 UI state を provider や context の形に移したい
• forwardRef を避けるなど、React 19 に伴う変更へコードを更新したい

実務で役立つ理由

この skill はエージェント向けにかなり意見がはっきりしており、まずアーキテクチャのルール、次に state、最後に実装パターンを優先します。この順序は、局所的な修正ではなく、拡張できる解決策が必要なときに重要です。

インストールする価値があるケース

vercel-composition-patterns を入れるべきなのは、一般的な React プロンプトよりもアーキテクチャの採点基準に近い助言が欲しいときです。API 設計、再利用性、長期保守を気にしない一回限りのコンポーネント断片だけが欲しいなら、入れなくても構いません。

vercel-composition-patterns skill の使い方

skill をインストールしてルールセットを確認する

ディレクトリ標準の skill manager で vercel-composition-patterns install のフローを使い、リポジトリのパスが skills/composition-patterns になっていることを確認してください。この skill には install script はありません。価値があるのは生成コードではなく、ルールファイルとその並び順です。

実装ではなく、まず判断ルールから始める

vercel-composition-patterns usage で最も効果的なのは、望むコード形ではなく、まずコンポーネントの課題をモデルに渡すことです。入力例:

• “isThread, isDMThread, isEditing を持つ Composer コンポーネントを composition ベースの API にリファクタリングしてください。”
• “サブコンポーネント間で選択 state を共有する settings panel の compound component API を設計してください。”
• “この UI library のコンポーネントを見て、明示的な variants にすべきか compound components にすべきか提案してください。”

出力品質を左右するファイルを読む

強い vercel-composition-patterns guide にしたいなら、まず次を確認してください。

• SKILL.md で全体の意図と適用タイミングを確認する
• AGENTS.md でコンパイル済みのルール階層と推奨パターンを確認する
• rules/_sections.md でカテゴリの優先順位を把握する
• rules/architecture-avoid-boolean-props.md
• rules/architecture-compound-components.md
• rules/react19-no-forwardref.md

アーキテクチャ選択を変えるコンテキストを渡す

良い入力には次の情報を含めます。

• 現在の props と state の形
• 利用者がカスタマイズを必要とするのか、それとも少数の固定モードだけでよいのか
• どのサブ部分が state を共有する必要があるか
• React 19 が対象範囲に入るか
• backward compatibility が重要かどうか

弱い入力: “このコンポーネントを良くして。”
より強い入力: “このコンポーネントには 6 個の boolean props、3 つのモード、共有 submit state があります。公開時の使い勝手をシンプルに保ちつつ、内部の分岐を context に逃がす compound-component API を提案してください。”

vercel-composition-patterns skill の FAQ

vercel-composition-patterns は大規模コードベース専用ですか？

いいえ。大きな、または再利用されるコンポーネントシステムでは特に価値がありますが、比較的小さなコンポーネントでも、API がすでに理解しにくくなり始めているなら役立ちます。重要なのはサイズだけではなく、props で振る舞いを表現し始めていて、構造としては表しきれていないかどうかです。

普通の React プロンプトと何が違うのですか？

普通のプロンプトでも、それらしいコンポーネント案は出せます。vercel-composition-patterns は、API の形を言語化して正当化すること、アーキテクチャのルールを優先すること、boolean prop の肥大化や render props の使いすぎといった典型的な退行を避けることをモデルに促します。

初心者にも向いていますか？

はい。良いコンポーネント境界を学びたいなら向いています。ただし、トレードオフの説明なしで手早くコピペできる答えを求めるなら、初心者向けとは言いにくいです。コードを書く前に設計を比較する意欲があるほど、この skill は役立ちます。

使わないほうがよいのはどんなときですか？

手早いスタイル調整、単発の小さなコンポーネント、あるいは API がすでに固定されていて変えられないケースでは、vercel-composition-patterns は使わないでください。最も強いのは、実装速度よりも抽象化の失敗が主なリスクになっている場面です。

vercel-composition-patterns skill を改善する方法

既存の API 形状を提示する

最も大きく品質が上がるのは、現在のコンポーネントシグネチャを見せることです。特に boolean、variant props、callbacks、共有 state は重要です。何が過剰に設定可能になっているのかが見えなければ、より良い composition は提案できません。

望む利用者体験を明示する

外から見たときにコンポーネントをどう感じさせたいかを伝えてください。

• “利用者が subcomponents を組み合わせて UI を構成できるようにしたい。”
• “公開する variants は 3 つだけにしたい。”
• “内部 state は provider の背後に隠したい。”

vercel-composition-patterns usage が改善するのは、最適なパターンは内部のリファクタリングだけでなく、公開 API の意図で決まるからです。

コードより先にパターン提案を求める

強いワークフローは、まずアーキテクチャ選択を尋ね、その後に実装を依頼する流れです。たとえば:

1. “これは compound components、explicit variants、children composition のどれにすべきですか？”
2. “では、選んだパターンで書き直してください。”

この 2 段階にすると、早すぎるコード生成を避けやすくなり、vercel-composition-patterns skill の信頼性も上がります。

よくある失敗パターンに注意する

主な失敗パターンは次のとおりです。

• boolean を、同じくらい意味の分かりにくい magic props に置き換える
• variant API のほうが単純な場面でも、すべてを compound component にしてしまう
• state を context に移すだけで、state/actions/meta のインターフェースを明確にしない
• React 19 で注意が必要なコードに forwardRef を使う

最初の出力が抽象的すぎると感じたら、制約を足して要件を絞ってください。対象の React バージョン、互換性の制限、公開 API を安定維持する必要があるかどうかを明示すると、精度が上がります。