vercel-composition-patterns

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.

1. Aktywuj tę umiejętność w swoim agencie, gdy pracujesz nad refaktoryzacją komponentów React lub projektowaniem architektury biblioteki komponentów. Skill automatycznie się włączy, gdy rozpozna zadania związane z komponentami złożonymi, render props, dostawcami kontekstu lub ogólną architekturą komponentów.

2. Gdy napotykasz komponenty z wieloma boolowskimi propami (np. isLoading, isError, isDisabled), skonsultuj się ze wzorcem architecture-avoid-boolean-props. Zamiast dodawać kolejne boolean props, użyj kompozycji — pozwól na elastyczność poprzez strukturę komponentów, a nie ich parametryzację.

3. Dla złożonych komponentów, które muszą dzielić stan między wieloma dziećmi, zastosuj wzorzec architecture-compound-components. Struktura komponenty z wspólnym kontekstem, aby uniknąć przekazywania propów przez wiele poziomów.

4. Gdy projektujesz dostawcę stanu (provider), pamiętaj o regułach z kategorii State Management: oddziel implementację od interfejsu (state-decouple-implementation), zdefiniuj generyczny interfejs ze stanem, akcjami i metadanymi (state-context-interface), i przenieś stan do komponentów dostawcy (state-lift-state).

5. Jeśli pracujesz z React 19, sprawdź sekcję React 19 APIs w dokumentacji umiejętności, aby upewnić się, że Twoje wzorce są zgodne z najnowszymi zmianami w frameworku.

6. Używaj tej umiejętności jako przewodnika podczas przeglądów kodu i planowania architektury komponentów — pomaga ona zarówno ludziom, jak i agentom AI pracować efektywnie z rosnącymi bazami kodu.