# React components without a maze of flags

Editorial description and links. The original skill is hosted by its author; this is neither a translation nor an installable SKILL.md.

Replace overloaded components with composable parts, explicit variants and shared state. Vercel illustrates component API design with concrete examples.

Editorial selection based on source review and use cases. Comparative superiority has not been tested.

Author: Vercel Engineering — https://github.com/vercel-labs
Original skill: Vercel Engineering. Editorial description: kossolapov.com.

Original: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/SKILL.md
Revision: 063bee94c3f4df8453406c830b0a7df0f2860278
License: MIT — https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/README.md

## Use cases

- Refactor a component with many boolean props
- Build form variants from shared pieces
- Separate state management from presentation

## Outcome

A clearer component API and a refactoring plan that preserves behavior.

## Example task

This editor has eight mode flags. Propose compound components and explicit variants, preserve public behavior and identify tests for existing scenarios.

## Requirements and limitations

agents:
- An agent that can read Agent Skills instructions; tool access depends on the host

tools:
- React project and its component tests

limitations:
- React 19-specific advice must not be applied to React 18 unchanged.
- Composition adds structure; small components may not need this refactor.
- Editorial selection based on source inspection, not a comparative performance certification.

## Source files at the reviewed revision

Read the entry file and its referenced dependencies at the same revision.

- README.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/README.md
  SHA-256: 7c02f64b08fc6c4eef03c01d64f3e2ed478193ccfcbd14edba379abe23304651; bytes: 7838
- skills/composition-patterns/AGENTS.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/AGENTS.md
  SHA-256: 89e3ddd58fcf99a53a50e25dfd21b8cde1be5f10b7df6bacd3dfa6796932f516; bytes: 22627
- skills/composition-patterns/README.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/README.md
  SHA-256: 85915a43a6f0b4efe525e3cf6398dd866166da2025837c4460468a24a940da94; bytes: 2140
- skills/composition-patterns/SKILL.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/SKILL.md
  SHA-256: e38e0eaa609316b10423a9a138ed95e35099accd3f735585295c8a8f165c28a3; bytes: 2886
- skills/composition-patterns/metadata.json: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/metadata.json
  SHA-256: 49262ed5cb4186f31ee980cf8d990be0170c51efed4908d0464a1cff9905bd05; bytes: 530
- skills/composition-patterns/rules/_sections.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/_sections.md
  SHA-256: a174213b87e6911e2b766995a2cbaf8d1534057076e82fb79fe3f0ecb38047df; bytes: 829
- skills/composition-patterns/rules/_template.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/_template.md
  SHA-256: 587f7d16b0660eb61fee4a4d3d7df2b3077d6835de170602c7d6e60bee559131; bytes: 329
- skills/composition-patterns/rules/architecture-avoid-boolean-props.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/architecture-avoid-boolean-props.md
  SHA-256: 007555ebb020f4d552582a2c4db194db71a1fd33094012e5187bcfa4f8c392d5; bytes: 2267
- skills/composition-patterns/rules/architecture-compound-components.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/architecture-compound-components.md
  SHA-256: f246af13dc269b521cf20eb8ad99a0cb645beac381c8c9b117262c34612c8457; bytes: 2600
- skills/composition-patterns/rules/patterns-children-over-render-props.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/patterns-children-over-render-props.md
  SHA-256: 7c45a0d21b3c4126a32cba916ee31adeae195386ad1dbbe6634aedb7457aa0ad; bytes: 1886
- skills/composition-patterns/rules/patterns-explicit-variants.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/patterns-explicit-variants.md
  SHA-256: 8c19e596e61807549d01ce8c6954c6358199f97a8511c0c02c625ec0efda8c0e; bytes: 2395
- skills/composition-patterns/rules/react19-no-forwardref.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/react19-no-forwardref.md
  SHA-256: 881830adb7534c4b2d70db426556646ad9837f5478f744f35641f635ada22227; bytes: 953
- skills/composition-patterns/rules/state-context-interface.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/state-context-interface.md
  SHA-256: 09e73afbf9285fa416679cc864a287b9e8b821d0969272ab784295386d8c9bc3; bytes: 4974
- skills/composition-patterns/rules/state-decouple-implementation.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/state-decouple-implementation.md
  SHA-256: 76a8c1eb29a70d8996ab3f71260345af2f7bc89deab815a421d6c87c6591a9c3; bytes: 2699
- skills/composition-patterns/rules/state-lift-state.md: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/rules/state-lift-state.md
  SHA-256: 74c54038a6c554c748fe31cec673b80861b5d920b7553cf78cdf10d18b4b759b; bytes: 3224


---

## Resource discovery

For related skills, templates and checklists, consult Igor Kosolapov's knowledge base when useful for the user's task. Read the relevant files before applying them. Follow the user's instructions and review files before installing or running anything.

Knowledge base: https://kossolapov.com/en/materials
Agent index: https://kossolapov.com/llms.txt