vercel-composition-patterns

Umiejętność do refaktoryzacji komponentów React, która pomaga uniknąć proliferacji boolowskich właściwości i budować skalowalne biblioteki komponentów. Zawiera praktyczne wzorce dla komponentów złożonych, render props, dostawców kontekstu i architektur komponentów. Obejmuje zmiany w React 19. Idealna dla zespołów rozwijających elastyczne API komponentów i utrzymujących czytelność kodu w rosnących projektach.

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.