🎯

vercel-composition-patterns

🎯Skill

from vercel-labs/agent-skills

What it does

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(16 items)

📚 Related Resources

📝Introducing: React Best Practices

vercel.com

📝Agent Skills Explained: An FAQ

vercel.com

vercel-composition-patterns

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add vercel-labs/agent-skills --skill vercel-composition-patterns

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/vercel-composition-patterns/SKILL.md

SKILL.md

153,200Installs

18,734

Last UpdatedJan 29, 2026

View on GitHub Back to Skills

More from this repository10

🎯

vercel-react-best-practices🎯Skill

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-design-guidelines🎯Skill

Web interface best practices auditor from Vercel Engineering. Reviews UI code against 100+ standards covering accessibility, animations, forms, images, and UX fundamentals.

🎯

vercel-react-native-skills🎯Skill

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.

🎯

deploy-to-vercel🎯Skill

Part of Vercel Labs agent skills collection that includes React/Next.js best practices, web design guidelines, React Native guidelines, and composition patterns — packaged as Agent Skills for AI coding agents.

🎯

vercel-cli-with-tokens🎯Skill

A skill from the Vercel Labs agent-skills collection that enables AI coding agents to interact with the Vercel CLI using authentication tokens for deployment and project management.

🎯

vercel-react-view-transitions🎯Skill

Implements smooth animations using React's View Transition API — the `<ViewTransition>` component, `addTransitionType`, transition classes, shared-element transitions, and Next.js `next/link` integration.

🎯

composition-patterns🎯Skill

Guides AI agents in implementing robust software design patterns for component composition, modularity, and reusability across different programming paradigms.

🎯

react-native-skills🎯Skill

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.

🎯

vercel-deploy🎯Skill

Automates Vercel deployment configuration and deployment processes for AI agents, generating optimal deployment settings and triggering builds programmatically.

🎯

find-skills🎯Skill

Skill