shadcn-ui-conventions

Skill zawierający standardy kodowania dla komponentów interfejsu użytkownika w stylu 8-bitowym. Używaj go podczas tworzenia lub modyfikowania komponentów shadcn/ui z retro-stylizacją. Definiuje wzorce importów, strukturę typów i reguły formatowania, które są wyłączone z automatycznego lintowania, aby zachować spójność z konwencjami shadcn/ui i 8-bitowymi elementami wizualnymi.

1. Zainstaluj skill w swoim projekcie, umieszczając go w katalogu .claude/skills/ lub zintegruj z systemem Claude/Copilot zgodnie z dokumentacją MCP.

2. Podczas tworzenia nowego komponentu UI w katalogu components/ui odwołaj się do skill, aby uzyskać prawidłową strukturę importów — najpierw biblioteki zewnętrzne (class-variance-authority, @radix-ui), potem utils wewnętrzne (@/lib/utils), następnie komponenty bazowe i arkusze stylów retro.

3. Dla komponentów 8-bitowych eksportuj interfejs typów osobno (np. export interface BitButtonProps) zamiast definiować props inline, aby zachować czytelność i zgodność z konwencją.

4. Pamiętaj, że katalog components/ui jest wyłączony z lintowania Biome — jeśli chcesz ręcznie sprawdzić formatowanie, uruchom npx biome check components/ui/.

5. Kiedy modyfikujesz istniejące komponenty shadcn/ui lub dodajesz retro-stylizację, upewnij się, że importujesz arkusz stylów retro (@/components/ui/8bit/styles/retro.css) na końcu listy importów.

6. Stosuj skill jako referencję przy każdym nowym komponencie — zapewnia spójność całego projektu i ułatwia współpracę zespołu nad interfejsem użytkownika.