C✳CODEZ.WIN
🌐 English

Localized reading guide

vercel-composition-patternsPurpose, usage and source

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.

Source retrieved:

Source repository
vercel-labs/agent-skills
SKILL.md
skills/composition-patterns/SKILL.md
Repository stars
33,269
Repository updated
2026-10-29
Categories
Development
Last collected

License: Unspecified

Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.

The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.

What this Skill does

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.

How the upstream workflow works

How to Use

Read individual rule files for detailed explanations and code examples: Each rule file contains: Brief explanation of why it matters Incorrect code example with explanation

Upstream passage · L71 ↗

When to Apply

Reference these guidelines when: Refactoring components with many boolean props Building reusable component libraries Designing flexible component APIs

Upstream passage · L22 ↗

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.

Upstream passage · L15 ↗
Upstream passage · ↗
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Requirements and setup

No short requirements passage was selected from this file. This does not mean the Skill has no dependencies. Check the repository setup instructions and referenced files.

Limits and quality checks

No separate limits passage was selected from this file. This does not mean the Skill is safe for every input or environment. Review the complete source and validate your own result.

Start with a safe trial

  1. Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
  2. Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
  3. Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
  4. Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.

Skill format and directory specification ↗

Read further in the source

Translation and scope

This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.

This introduction refers to the pinned version below; current repository activity and collection time are shown separately.

Source retrieved
Source commit
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62
Source SHA-256
e38e0eaa609316b10423a9a138ed95e35099accd3f735585295c8a8f165c28a3
Back to the full Skill catalog