--- title: "vercel-composition-patterns skill: replace React boolean props" canonical_url: https://cookiesforai.app/skills/vercel-labs/vercel-composition-patterns last_updated: 2026-10-02T01:58:30+02:00 type: skill summary: "React Composition Patterns is Vercel's agent skill for React component APIs: compound components, lifted state and explicit variants instead of a growing list of boolean props." install: "npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns" related: - "https://cookiesforai.app/skills/anthropics/claude-api" - "https://cookiesforai.app/skills/stripe/stripe-best-practices" - "https://cookiesforai.app/skills/vercel-labs/vercel-react-best-practices" - "https://cookiesforai.app/skills/vercel-labs/vercel-react-native-skills" - "https://cookiesforai.app/skills/vercel-labs/deploy-to-vercel" - "https://cookiesforai.app/skills/vercel-labs/vercel-react-view-transitions" - "https://cookiesforai.app/skills/vercel-labs/vercel-cli-with-tokens" - "https://cookiesforai.app/skills/vercel-labs/vercel-optimize" --- # React Composition Patterns React Composition Patterns is Vercel's agent skill for React component APIs: compound components, lifted state and explicit variants instead of a growing list of boolean props. | Fact | Value | |---|---| | Publisher | Vercel (official, own GitHub account) | | Source | https://github.com/vercel-labs/agent-skills/tree/HEAD/skills/composition-patterns | | License | MIT | | Repository stars | 31,813 on 2026-10-02 | | Skill name | vercel-composition-patterns | | Version | 1.0.0 (from its SKILL.md, https://github.com/vercel-labs/agent-skills/blob/HEAD/skills/composition-patterns/SKILL.md, read 2026-10-02) | | Category | Coding and frameworks | | Skill last changed | 2026-01-28 | | Page updated | 2026-10-02 | | Facts checked | 2026-10-02 | ## Install Install this skill with the skills CLI: ``` npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns ``` Or install every Vercel skill at once: ``` npx skills add vercel-labs/agent-skills ``` ## Ask your coding agent A skill can include scripts that run on your computer, so read its source first: https://github.com/vercel-labs/agent-skills/tree/HEAD/skills/composition-patterns ```text Install the agent skill vercel-composition-patterns from github.com/vercel-labs/agent-skills. ``` ## What it does React Composition Patterns is Vercel's guide to building React components that stay flexible as a codebase grows. It loads when an agent refactors components that have piled up boolean props, builds a reusable component library, designs a component API, or works with compound components, render props or context providers. The guide says these patterns make a codebase easier for both people and AI agents to work with. React Composition Patterns holds eight rules in four groups, ordered by impact. Component architecture comes first: replace boolean props with composition, and structure complex components as compound components that share context. The state rules keep the provider as the only place that knows how state is managed, define a generic context interface with state, actions and meta, and lift state into providers so sibling components can reach it. Two implementation rules in React Composition Patterns prefer explicit variant components over boolean modes, and children over renderX props. A React 19 rule, skipped on React 18 or earlier, treats ref as a regular prop instead of wrapping components in forwardRef, and reads context with use() instead of useContext(). Each rule file shows incorrect and correct code, and AGENTS.md compiles every rule into one document. ## When to use it - You have a component with so many boolean props that every new case adds another flag. - You are building a component library and want APIs other developers can compose. - You are moving a codebase to React 19 and want forwardRef and useContext replaced. - You want an agent to review your component architecture before it grows further. ## When to pick something else - Your problem is speed, such as request waterfalls or bundle size: use React Best Practices. ## Which agents it works in Vercel documents it for any AI coding agent that reads Agent Skills, installed with the skills CLI. The open skills CLI also installs it into 78 agents (listed with the CLI on 2026-10-01). ## License MIT. The SKILL.md frontmatter says license: MIT. The vercel-labs/agent-skills repository has no LICENSE file and GitHub reports no license; its README ends with "License: MIT" (checked 2026-10-01). MIT lets you use, change and share the skill if you keep the copyright notice. ## Related ### Related skills for coding and frameworks - [Claude API](https://cookiesforai.app/skills/anthropics/claude-api): Claude API is Anthropic's open-source agent skill for code that calls Claude: current model IDs and prices, guides for seven SDK languages plus cURL, and guided migrations to newer models. - [Stripe best practices](https://cookiesforai.app/skills/stripe/stripe-best-practices): stripe-best-practices is Stripe's own agent skill for integration decisions: it steers the agent to the right Stripe API for payments, subscriptions, Connect, tax and security, using current API and SDK versions. - [React Best Practices](https://cookiesforai.app/skills/vercel-labs/vercel-react-best-practices): React Best Practices is Vercel Engineering's agent skill of 70 performance rules for React and Next.js, ranked by impact, which the agent applies when it writes or reviews code. - [React Native](https://cookiesforai.app/skills/vercel-labs/vercel-react-native-skills): React Native is Vercel's agent skill of React Native and Expo rules, ranked by impact: list performance, animations, native navigation and UI patterns for faster mobile apps. ### More from Vercel - [Deploy to Vercel](https://cookiesforai.app/skills/vercel-labs/deploy-to-vercel): Deploy to Vercel is Vercel's agent skill for getting a project live: the agent checks how your project is set up, picks a deploy method and returns a preview link unless you ask for production. - [React View Transitions](https://cookiesforai.app/skills/vercel-labs/vercel-react-view-transitions): React View Transitions is Vercel's agent skill for animating route changes, shared elements and list reorders with React's ViewTransition component, in Next.js and other React apps. - [Vercel CLI with Tokens](https://cookiesforai.app/skills/vercel-labs/vercel-cli-with-tokens): Vercel CLI with Tokens is Vercel's agent skill for running the Vercel CLI with an access token instead of vercel login: deploys, environment variables, logs and domains. - [Vercel Optimize](https://cookiesforai.app/skills/vercel-labs/vercel-optimize): Vercel Optimize is Vercel's agent skill that audits a deployed project from its production metrics and returns ranked, verified fixes to cut cost and speed up slow routes.