vercel-composition-patterns
A React skill from Vercel Labs that guides an agent when it designs or refactors component APIs.
スキルの内容
A React skill from Vercel Labs that guides an agent when it designs or refactors component APIs. It sorts its rules by priority across component architecture, state management, implementation patterns and React 19 API changes, with the main aim of replacing long lists of boolean props with compound components, lifted state and composition through children. Each rule lives in its own file in the skill folder, and a compiled document gathers them for agents that read one file. It is general React guidance and does not use the Vercel platform.
できること
- Refactor components that rely on many boolean props
- Design compound components that share state through context
- Apply React 19 API changes in component code
- Review component architecture against prioritised rules
インストール
- すべてのクライアントに追加するには、次のコマンドを実行します：
npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns
含まれるファイル
- AGENTS.md
- README.md
- metadata.json
- rules/_sections.md
- rules/_template.md
- rules/architecture-avoid-boolean-props.md
- rules/architecture-compound-components.md
- rules/patterns-children-over-render-props.md
- rules/patterns-explicit-variants.md
- rules/react19-no-forwardref.md
- rules/state-context-interface.md
- rules/state-decouple-implementation.md
- rules/state-lift-state.md
詳細
| 項目 | 内容 | 出典 |
|---|---|---|
| 種類 | スキル | |
| ツール | フロントエンドデザイン | |
| 公開元 | Vercel Labs | 出典 |
| 公式かどうか | ドキュメントに記載なし | |
| APIキーまたはサインインが必要 | ドキュメントに記載なし | |
| スクリプトを含む | いいえ | 出典 |
| プラットフォーム | ドキュメントに記載なし | |
| AIクライアント | ドキュメントに記載なし | |
| ライセンス | MIT | 出典 |
| 料金 | ドキュメントに記載なし | |
| 活動状況 | 最終コミット 2026年10月28日GitHubスター 33,877ダウンロード数のデータなし（npm・PyPIで未公開） | 出典 |
| リンク | リポジトリ Webサイト |
ほかのリポジトリにあるこのスキルのコピー（4件）
このスキルとは内容が異なります。手を加えたコピーか、古いバージョンの可能性があります。
- vercel-composition-patternssupabase/supabase
- vercel-composition-patternszebbern/claude-code-guide
- vercel-composition-patternsdraculabo/antigravitymanager
- vercel-composition-patternsleonardotrapani/better-skills
Vercel Labsのほかの掲載
スキル18件
- deploy-to-vercel (スキル)
- vercel-react-best-practices (スキル)
- vercel-react-native-skills (スキル)
- vercel-react-view-transitions (スキル)
- web-design-guidelines (スキル)
- slack (スキル)
README用バッジ
このプロジェクトのメンテナーの方は、このページにリンクするバッジを追加できます。
[](https://kitbay.app/skills/vercel-labs-composition-patterns/)
こちらにも掲載： フロントエンドデザイン
出典
- スキルファイル（SKILL.md）github.com/vercel-labs/agent-skills · 根拠となる項目：公開元2026年11月10日
- GitHubリポジトリgithub.com/vercel-labs/agent-skills · 根拠となる項目：活動状況, ライセンス2026年11月11日
- GitHubリポジトリgithub.com/vercel-labs/agent-skills · 根拠となる項目：ライセンス2026年11月13日
- リポジトリ内のフォルダ（composition-patterns）github.com/vercel-labs/agent-skills · 根拠となる項目：スクリプトを含む2026年11月10日