component-wrapper-architecture
Wzorce architektoniczne do opakowywania komponentów shadcn/ui w retro stylu 8-bit
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill zawierający najlepsze praktyki do tworzenia opakowań (wrapper) dla komponentów shadcn/ui z zachowaniem ich funkcjonalności i dodaniem retro estetyki 8-bit. Nauczysz się struktury importowania komponentów bazowych, definiowania wariantów za pomocą class-variance-authority, eksportowania interfejsów props oraz prawidłowego użycia ref w React 19. Wzorzec pozwala na utrzymanie kompatybilności z oryginalnymi komponentami shadcn/ui przy jednoczesnym dodaniu niestandardowych stylów i animacji retro.
Jak używać
Zainstaluj skill w swoim projekcie Claude/Copilot, wskazując repozytorium TheOrcDev/8bitcn-ui. Skill będzie dostępny w kontekście pracy z komponentami React.
Kiedy tworzysz nowy komponent 8-bit, zaimportuj bazowy komponent shadcn/ui z aliasem (np. Button as ShadcnButton) oraz niezbędne narzędzia: VariantProps i cva z class-variance-authority, funkcję cn z lib/utils.
Zdefiniuj warianty komponentu za pomocą cva(), określając dostępne opcje (font, variant, size) i ich wartości domyślne. Struktura powinna odzwierciedlać opcje, które chcesz udostępnić użytkownikom komponentu.
Utwórz interfejs props (np. BitButtonProps) rozszerzający zarówno natywne atrybuty HTML elementu, jak i VariantProps z definicji wariantów. Dodaj opcjonalne pola asChild i ref zgodnie z wymogami React 19.
Implementuj funkcję komponentu, która rozpakuje props, wyodrębni warianty i klasy, a następnie zwróci owinięty komponent shadcn/ui z połączonymi klasami CSS (używając cn()) i przekazanymi props. Dla komponentów wieloczęściowych (Dialog, Dropdown) re-eksportuj niezmienione podkomponenty bezpośrednio z shadcn/ui.
Zaimportuj plik stylów retro.css zawierający animacje i styling 8-bit, a następnie testuj komponent w aplikacji, weryfikując zarówno funkcjonalność bazowego komponentu, jak i poprawne renderowanie retro estetyki.