component-wrapper-architecture
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
How to use
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.