Составной паттерн
Teaches the compound component pattern for shared implicit state. Use when building related components like tabs, accordions, or dropdowns that need to coordinate without explicit prop passing.
AIpatternsdev
official
Другое
Что делает навык
Паттерн составных компонентов (compound component) позволяет создавать связанные компоненты, которые зависят друг от друга через общее состояние и совместно используют логику. Он обеспечивает чистый API компонентов, скрывая внутреннее управление состоянием от пользователя.
Когда применять
- Создание выпадающих списков (dropdowns) с подкомпонентами
- Разработка вкладок (tabs) с общим состоянием активной вкладки
- Построение меню (menus) или элементов меню, координирующих действия
- Разработка аккордеонов, где открытие одного элемента закрывает другие
- Создание связанных UI-компонентов, которым нужна координация без явной передачи props
Как работает
- Идентифицируйте компоненты, которые принадлежат друг другу и зависят от общего состояния
- Объедините логику и состояние в родительский компонент или контекст
- Создайте подкомпоненты, которые читают и обновляют это общее состояние
- Обеспечьте взаимодействие между подкомпонентами без явной передачи props через родитель
- Предоставьте чистый API, скрывающий внутреннее управление состоянием от потребителя компонентов
Примеры запросов агенту
Создай компонент выпадающего списка с использованием паттерна составных компонентов
Реализуй вкладки (tabs) с общим состоянием через compound component pattern
Разработай меню с подкомпонентами, координирующими выбор элементов без явных props
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «compound-pattern» из репозитория:
# https://github.com/patternsdev/skills
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r compound-pattern/ ~/.claude/skills/compound-pattern/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.