vercel-composition-patterns
๐ฏSkillfrom vercel-labs/agent-skills
|React composition patterns skill from Vercel Labs that helps avoid boolean prop proliferation through compound components, state lifting, and internal composition techniques.
Overview
React composition patterns that scale, from the Vercel Labs agent-skills collection. This skill teaches AI coding agents (and developers) how to avoid boolean prop proliferation by applying compound components, state lifting, and internal composition. It provides practical guidelines for refactoring components that have grown unwieldy with too many boolean props, and for designing flexible, reusable component APIs.
Key Features
- Guides on extracting compound components to simplify complex interfaces
- State lifting patterns to reduce prop drilling and minimize coupling
- Internal composition strategies for building flexible component APIs
- Refactoring recipes for components overloaded with boolean props
- Designed for use with AI coding agents like Claude Code and Cursor
- Part of the Vercel Labs agent-skills collection alongside React, Next.js, and web design skills
Who is this for?
React developers and teams building component libraries or design systems who want to keep their component APIs clean and composable as their codebase scales.
Same repository
vercel-labs/agent-skills(14 items)
Installation
npx vibeindex add vercel-labs/agent-skills --skill vercel-composition-patternsnpx skills add vercel-labs/agent-skills --skill vercel-composition-patterns~/.claude/skills/vercel-composition-patterns/SKILL.mdSKILL.md
More from this repository10
React and Next.js performance optimization guidelines from Vercel Engineering. 40+ rules across 8 categories covering component performance, data fetching, and bundle size optimization.
Web interface best practices auditor from Vercel Engineering. Reviews UI code against 100+ standards covering accessibility, animations, forms, images, and UX fundamentals.
React Native best practices skill with 16 rules across 7 sections covering performance, layout, animation, images, state management, architecture, and platform-specific patterns for Expo and React Native apps.
React Native best practices optimized for AI agents from Vercel Engineering. 16 rules across 7 sections covering mobile performance, layout patterns, animations, and platform-specific implementation.
Guides AI agents in implementing robust software design patterns for component composition, modularity, and reusability across different programming paradigms.
Skill
Automates Vercel deployment configuration and deployment processes for AI agents, generating optimal deployment settings and triggering builds programmatically.
Skill
Skill
Skill