building-compound-components

Creates unstyled compound components that separate business logic from styles. Use when building headless UI primitives, creating component libraries, implementing Radix-style namespaced components, or when the user mentions \

1. 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.

2. 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.

3. 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.

4. 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".

5. 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.

6. Wygeneruj komponenty z czystym API — eksportuj tylko komponenty (np. Component.Root, Component.Content) i typy props, nie implementacyjne detale.