shadcn-ui

Skill do pracy z komponentami shadcn/ui w aplikacjach Next.js 16. Zawiera wzorce implementacji, dostosowywania stylów, komponowania primitywów oraz integracji formularzy z react-hook-form i Zod. Obejmuje konwencje Atlas, obsługę dostępności (WCAG 2.1 AAA) i pracę z tabelami danych, dialogami, powiadomieniami toast oraz innymi interaktywnymi elementami. Komponenty kopiujesz bezpośrednio do projektu i dostosowujesz w src/components/ui/, bez dodatkowych zależności.

1. Skopiuj komponenty shadcn/ui do folderu src/components/ui/ w swoim projekcie Next.js 16. Każdy komponent jest plikiem TypeScript/TSX, który możesz natychmiast dostosować do swoich potrzeb.

2. Dostosuj warianty komponentów bezpośrednio w pliku – zmień kolory, rozmiary i style za pomocą Tailwind CSS v4. Skill zawiera wzorce CVA (Class Variance Authority) do zarządzania wariantami komponentów.

3. Integruj komponenty Form z react-hook-form – użyj Zod do walidacji schematów, połącz formularze z mutacjami tRPC i obsługuj błędy walidacji.

4. Buduj komponenty złożone z primitywów (Dialog, Form, Table) – komponuj je razem, aby utworzyć niestandardowe rozwiązania dla tabel danych, modali, drawersów i list.

5. Implementuj wzorce dostępności – dodaj etykiety ARIA do przycisków z ikonami, zapewnij nawigację klawiaturą, zarządzaj fokusem i osiągaj standard WCAG 2.1 AAA z minimalnym rozmiarem dotyku 44px.

6. Obsługuj stany ładowania i interakcje – używaj skeleton loading, powiadomień toast, menu dropdown, popoversów i tooltipów zgodnie z wzorcami zawartymi w skill.