vercel-composition-patterns
スケーラブルなReactのコンポジションパターンです。ブール型のpropsが増殖してしまったコンポーネントのリファクタリング、柔軟なコンポーネントライブラリの構築、再利用可能なAPIの設計が必要な場合に活用できます。Compound Components、Render Props、Context Providersなどのコンポーネントアーキテクチャに関わるタスクで自動的に起動します。React 19のAPI変更にも対応しています。
description の原文を見る
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
SKILL.md 本文
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()を使用します
使い方
詳細な説明とコード例は、個別のルールファイルを参照してください:
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md
各ルールファイルには以下が含まれます:
- その理由についての簡潔な説明
- 説明付きの不正なコード例
- 説明付きの正しいコード例
- 追加のコンテキストと参考資料
完全なコンパイル済みドキュメント
すべてのルールを展開した完全ガイドについては: AGENTS.md
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- vercel-labs
- ライセンス
- MIT
- 最終更新
- 2026/5/7
Source: https://github.com/vercel-labs/agent-skills / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。