building-compound-components
Komponenty React bez stylów, gotowe do integracji z własnymi designami
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do tworzenia niezastylizowanych komponentów złożonych (compound components) wzorem Radix UI. Oddzielaj logikę biznesową od warstwy prezentacji, budując biblioteki komponentów headless, prymitywy UI lub komponenty z przestrzenią nazw. Komponenty udostępniają zachowanie poprzez context, a ty kontrolujesz renderowanie. Idealne, gdy pracujesz z render props, headless UI lub gdy chcesz maksymalnej elastyczności stylizacji.
Jak używać
Aktywuj skill w Claude, gdy pracujesz nad komponentami React, które mają być niezastylizowane i wielokrotnie użyteczne. Wspomni o "compound components", "headless", "unstyled", "primitives" lub "render props" — skill automatycznie się zaproponuje.
Zdefiniuj strukturę komponentu, wskazując główne części (Root, Content, Trigger itp.). Skill utworzy komponenty z wewnętrznym context do zarządzania stanem, bez eksportowania hooków jako publicznego API.
Pamiętaj, że hooki są szczegółami implementacji — konsumenci komponentu powinni mieć dostęp do stanu poprzez render props, nie bezpośrednio przez hooki. Skill będzie trzymać hooki wewnątrz.
Jeśli twoja biblioteka zawiera warstwę stylizowaną w tym samym pakiecie, może ona importować hooki bezpośrednio z pliku źródłowego — to wyjątek od reguły "nie eksportuj hooków".
Umieść logikę pobierania danych (integracje z zewnętrznymi źródłami, kombinowanie providerów) w warstwie stylizowanej, nie w prymitywach. Prymitywy mogą używać SDK hooków (np. useTamboThreadInput), ale nie powinny zawierać custom data fetching.
Wygeneruj komponenty z czystym API — eksportuj tylko komponenty (np. Component.Root, Component.Content) i typy props, nie implementacyjne detale.