New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

React Composition Patterns

by vercel-labs in vercel-labs/openreview

Rules for structuring React components with composition instead of boolean props, covering compound components, lifted state, variants and React 19 changes.

OfficialMITAuto-check passedFrontend & Design

Install React Composition Patterns

skills CLI
$ npx skills add vercel-labs/openreview --skill vercel-composition-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install vercel-labs/openreview vercel-composition-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/vercel-labs/openreview.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vercel-composition-patterns .claude/skills/vercel-composition-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vercel-composition-patterns
GitHub stars
1.7k
Used in
58 other repos
Token cost
~721 tokens
SKILL.md length
257 words
Files
11
Skills in repo
6
Repo updated
First seen
Licence
MIT

At a glance

Rules for structuring React components with composition instead of boolean props, covering compound components, lifted state, variants and React 19 changes.

  • Works in 4 steps: Component Architecture (HIGH) → State Management (MEDIUM) → Implementation Patterns (MEDIUM) → …
  • Refactoring a component that has many boolean props
  • SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

This rule set steers React code away from components that grow a pile of boolean props and toward composition. A SKILL.md index groups the guidance by priority: component architecture first, then state management, implementation patterns and React 19 APIs, each rule in its own file with a short explanation, an incorrect example and a correct one.

Rules include avoiding boolean props to customize behavior, building compound components that share context, keeping the provider as the only place that knows how state is managed, defining a generic context interface, lifting state into providers so siblings can reach it, writing explicit variant components, and preferring children over render props. The React 19 section applies only to React 19 and later: skip forwardRef and use use() instead of useContext(). A compiled AGENTS.md holds every rule in one document.

When your agent uses it

  • Refactoring a component that has many boolean props
  • Designing the API of a reusable React component library
  • Building compound components that share state through context
  • Reviewing component architecture before it spreads across a codebase
  • Moving code off forwardRef when upgrading to React 19

Example prompts

  • “Refactor the Button component, which has isLoading, isPrimary and isLarge flags, into explicit variants.”
  • “Turn this Tabs component into a compound component with a shared context provider.”
  • “Review our modal components against the composition rules and list what to change.”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Component Architecture (HIGH)
  2. State Management (MEDIUM)
  3. Implementation Patterns (MEDIUM)
  4. React 19 APIs (MEDIUM)

What it can do on your machine

Read from SKILL.md and the folder at commit 672deb2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Composition Patterns loads about 721 tokens when it runs. Until then it costs about 85 tokens; SKILL.md has 257 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~85
When it runs · the whole SKILL.md, loaded when a task matches
~721

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from vercel-labs/openreview at commit 672deb2, republished under its MIT licence (© vercel-labs). 257 words, ~721 tokens.

Download SKILL.mdSave it as .claude/skills/vercel-composition-patterns/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
vercel-composition-patterns
description
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
license
MIT
metadata.author
vercel
metadata.version
1.0.0

React Composition Patterns

Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.

When to Apply

Reference these guidelines when:

  • Refactoring components with many boolean props
  • Building reusable component libraries
  • Designing flexible component APIs
  • Reviewing component architecture
  • Working with compound components or context providers

Rule Categories by Priority

PriorityCategoryImpactPrefix
1Component ArchitectureHIGHarchitecture-
2State ManagementMEDIUMstate-
3Implementation PatternsMEDIUMpatterns-
4React 19 APIsMEDIUMreact19-

Quick Reference

1. Component Architecture (HIGH)
  • architecture-avoid-boolean-props - Don't add boolean props to customize behavior; use composition
  • architecture-compound-components - Structure complex components with shared context
2. State Management (MEDIUM)
  • state-decouple-implementation - Provider is the only place that knows how state is managed
  • state-context-interface - Define generic interface with state, actions, meta for dependency injection
  • state-lift-state - Move state into provider components for sibling access
3. Implementation Patterns (MEDIUM)
  • patterns-explicit-variants - Create explicit variant components instead of boolean modes
  • patterns-children-over-render-props - Use children for composition instead of renderX props
4. React 19 APIs (MEDIUM)

⚠️ React 19+ only. Skip this section if using React 18 or earlier.

  • react19-no-forwardref - Don't use forwardRef; use use() instead of useContext()

How to Use

Read individual rule files for detailed explanations and code examples:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Each rule file contains:

  • Brief explanation of why it matters
  • Incorrect code example with explanation
  • Correct code example with explanation
  • Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

© vercel-labs, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files in .agents/skills/vercel-composition-patterns of vercel-labs/openreview.

  • SKILL.md
  • AGENTS.md
  • README.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

Open the folder on GitHubat commit 672deb2

Used in at least 46 other repositories

We found 65 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 58 other GitHub owners. This page covers the copy in vercel-labs/openreview, which our catalogue first saw on October 7, 2026.

…and 15 more copies not listed here.

Compare with similar skills

React Composition Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React Composition Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Composition Patterns this skillvercel-labs/openreview1.7k58 repos~721Automated safety check: PassMIT
Vercel React Best Practicessanity-io/sanity6.4k130 repos~1.6kAutomated safety check: PassMIT
React Best Practicesmastra-ai/mastra29k—~1.9kAutomated safety check: PassCustom licence
React Render Types CompositionHorusGoul/eslint-plugin-react-render-types111—~1.1kAutomated safety check: PassMIT
React Best Practicesryokun6/ryos1.3k—~2kAutomated safety check: PassMIT
Vercel React Best Practicesgambitph/Stackable350—~2kAutomated safety check: PassMIT

Similar skills

  • Vercel React Best Practices

    sanity-io/sanity

    Official

    React and Next.js performance optimization guidelines from Vercel Engineering.

    6.4k GitHub starsUsed in 130 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • React Best Practices

    mastra-ai/mastra

    React performance optimization guidelines from Mastra Engineering.

    29k GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Render Types Composition

    HorusGoul/eslint-plugin-react-render-types

    Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.

    111 GitHub stars~1.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • React Best Practices

    ryokun6/ryos

    React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).

    1.3k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Vercel React Best Practices

    gambitph/Stackable

    React performance optimization guidelines from Vercel Engineering.

    350 GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Moai Ref React Patterns

    modu-ai/moai-adk

    React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.

    1.2k GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check passed

More from vercel-labs/openreview

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Auto-check passed

  • React Native Best Practices

    vercel-labs/openreview

    Official

    A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.

    1.7k GitHub starsUsed in 17 repos~1.1k tokens
    Auto-check passed

  • Next Cache Components

    vercel-labs/openreview

    Official

    Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag

    1.7k GitHub starsUsed in 9 repos~2.3k tokens
    Auto-check passed

  • Next Best Practices

    vercel-labs/openreview

    Official

    Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

    1.7k GitHub starsUsed in 18 repos~1k tokens
    Auto-check passed

  • Next Upgrade

    vercel-labs/openreview

    Official

    Upgrade Next.js to the latest version following official migration guides and codemods

    1.7k GitHub starsUsed in 6 repos~502 tokens
    Auto-check passed

Works with

Categories

Questions about React Composition Patterns

What does React Composition Patterns do?

Rules for structuring React components with composition instead of boolean props, covering compound components, lifted state, variants and React 19 changes. This rule set steers React code away from components that grow a pile of boolean props and toward composition.md index groups the guidance by priority: component architecture first, then state management, implementation patterns and React 19 APIs, each rule in its own file with a short explanation, an incorrect example and a correct one.

When should I use React Composition Patterns?

React Composition Patterns fits situations like: refactoring a component that has many boolean props; designing the API of a reusable React component library; building compound components that share state through context; reviewing component architecture before it spreads across a codebase.

How do I install React Composition Patterns in Claude Code?

Run `npx skills add vercel-labs/openreview --skill vercel-composition-patterns -a claude-code`. Or copy the skill folder (.agents/skills/vercel-composition-patterns in vercel-labs/openreview) into .claude/skills/vercel-composition-patterns in your project. Claude Code loads it when a task matches its description.

How do I install React Composition Patterns in Codex?

Run `npx skills add vercel-labs/openreview --skill vercel-composition-patterns -a codex`. Or copy the skill folder (.agents/skills/vercel-composition-patterns in vercel-labs/openreview) into .agents/skills/vercel-composition-patterns in your project. Codex loads it when a task matches its description.

Can I use React Composition Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vercel-labs/openreview --skill vercel-composition-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vercel-composition-patterns, .gemini/skills/vercel-composition-patterns, .github/skills/vercel-composition-patterns and .opencode/skills/vercel-composition-patterns in your project.

What does React Composition Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: React Composition Patterns is instructions for the agent only.

Does React Composition Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React Composition Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React Composition Patterns use?

React Composition Patterns is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Composition Patterns use?

About 721 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to React Composition Patterns?

Skills that share tags, products or a category with React Composition Patterns: Vercel React Best Practices (sanity-io/sanity, 6.4k stars), React Best Practices (mastra-ai/mastra, 29k stars), React Render Types Composition (HorusGoul/eslint-plugin-react-render-types, 111 stars) and React Best Practices (ryokun6/ryos, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Composition Patterns?

vercel-labs (a GitHub organization, an official publisher) maintains it in vercel-labs/openreview, which has 1,697 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on March 6, 2026.

Source: vercel-labs/openreview on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.