# React-компоненты без десятков флагов

Редакционное описание и ссылки. Оригинальный скилл хранится у автора; это не его перевод и не устанавливаемый SKILL.md.

Разделить перегруженный компонент на составные части, явные варианты и общее состояние. Vercel показывает, как проектировать API компонентов на конкретных примерах.

Редакционная подборка: изучены исходники и сценарии применения. Сравнительное превосходство не проверялось.

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

## Применение

- Разобрать компонент с множеством boolean-пропсов
- Собрать несколько вариантов формы из общих частей
- Отделить управление состоянием от отображения

## Результат

Более явный API компонентов и план рефакторинга с сохранением поведения.

## Пример запроса

У этого редактора восемь флагов режима. Предложи составные компоненты и явные варианты, сохрани публичное поведение и покажи тесты для существующих сценариев.

## Requirements and limitations

agents:
- Агент, умеющий читать инструкции Agent Skills; доступ к инструментам зависит от среды

tools:
- React-проект и тесты его компонентов

limitations:
- Рекомендации для React 19 нельзя без изменений применять в React 18.
- Композиция добавляет структуру; небольшим компонентам такой рефакторинг может не требоваться.
- Редакционный отбор по изученным исходникам, без сертификации сравнительной эффективности.

## 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