vercel-composition-patterns
A React skill from Vercel Labs that guides an agent when it designs or refactors component APIs.
What the skill teaches
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.
Capabilities
- 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
Install
- Run this to add it to Any client:
npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns
What's inside
- 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
Details
| Fact | Value | Source |
|---|---|---|
| Type | Skill | |
| Tool | Frontend design | |
| Publisher | Vercel Labs | source |
| Official status | Not stated in its documentation | |
| Needs an API key or sign-in | Not stated in its documentation | |
| Includes scripts | No | source |
| Platforms | Not stated in its documentation | |
| AI clients | Not stated in its documentation | |
| Licence | MIT | source |
| Pricing | Not stated in its documentation | |
| Activity | Last commit Oct 28, 202633,877 GitHub starsDownload data not available (not on npm or PyPI) | source |
| Links | Repository Website |
Copies of this skill in other repositories (4)
These differ from this skill's text. They may be adapted copies or older versions.
- vercel-composition-patternssupabase/supabase
- vercel-composition-patternszebbern/claude-code-guide
- vercel-composition-patternsdraculabo/antigravitymanager
- vercel-composition-patternsleonardotrapani/better-skills
More from Vercel Labs
10 skills
- deploy-to-vercel (Skill)
- vercel-react-best-practices (Skill)
- vercel-react-native-skills (Skill)
- vercel-react-view-transitions (Skill)
- web-design-guidelines (Skill)
- slack (Skill)
Badge for your README
Maintain this project? Add a badge that links to this page.
[](https://kitbay.app/skills/vercel-labs-composition-patterns/)
Also listed under: Frontend design
Sources
- Skill file (SKILL.md)github.com/vercel-labs/agent-skills · Backs: PublisherNov 10, 2026
- GitHub repositorygithub.com/vercel-labs/agent-skills · Backs: Activity, LicenceNov 11, 2026
- GitHub repositorygithub.com/vercel-labs/agent-skills · Backs: LicenceNov 13, 2026
- Folder in the repository (composition-patterns)github.com/vercel-labs/agent-skills · Backs: Includes scriptsNov 10, 2026