VE
vercel-composition-patterns
Паттерны композиции React для масштабирования компонентов и борьбы с proliferation boolean-пропсов. Полезно при рефакторинге, создании библиотек и работе с React 19 (use(), отказ от forwardRef).
Что делает навык
Набор паттернов композиции React для создания гибких и поддерживаемых компонентов, позволяющий избежать разрастания булевых пропсов. Полезен при рефакторинге, создании библиотек и работе с React 19 (включая использование use() вместо forwardRef).
Когда применять
- Рефакторинг компонентов с большим количеством булевых пропсов
- Создание переиспользуемых компонентных библиотек
- Проектирование гибких API компонентов
- Обзор архитектуры компонентов
- Работа с составными компонентами (compound components) или контекст-провайдерами
Как работает
- Применять паттерны композиции для построения гибких компонентов, избегая добавления булевых пропсов для настройки поведения
- Использовать составные компоненты (compound components) с общим контекстом для структурирования сложных компонентов
- Выносить состояние в провайдеры компонентов для доступа между соседними компонентами (state-lift-state)
- Определять общий интерфейс с состоянием, действиями и метаданными для внедрения зависимостей (state-context-interface)
- Создавать явные компонентные варианты вместо булевых режимов (patterns-explicit-variants)
- Использовать children для композиции вместо render-пропсов (patterns-children-over-render-props)
Примеры запросов агенту
Как переписать компонент с кучей булевых пропсов, используя композицию?
Покажи пример использования составных компонентов с общим контекстом
Как правильно вынести состояние в провайдер для доступа к нему из дочерних компонентов?
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «vercel-composition-patterns» из репозитория:
# https://github.com/vercel-labs/agent-skills
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r vercel-composition-patterns/ ~/.claude/skills/vercel-composition-patterns/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.