ui-styling
Buduj dostępne interfejsy z komponentami shadcn/ui i stylowaniem Tailwind CSS
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność do tworzenia pięknych, dostępnych interfejsów użytkownika łączących komponenty shadcn/ui (oparte na Radix UI), utility-first styling Tailwind CSS i projektowanie oparte na canvas. Użyj jej do budowania interfejsów w React-based frameworkach, implementacji systemów projektowania, tworzenia responsywnych layoutów, dodawania dostępnych komponentów (dialogi, formularze, tabele), dostosowywania motywów i kolorów, implementacji trybu ciemnego oraz generowania projektów wizualnych.
Jak używać
Zainstaluj umiejętność w swoim projekcie React-based (Next.js, Vite, Remix, Astro). Skill automatycznie ładuje referencje shadcn/ui i dokumentację Tailwind CSS potrzebne do pracy.
Kiedy budujesz interfejs użytkownika, poproś o komponenty shadcn/ui dla konkretnych elementów — dialogi, formularze, tabele, nawigacja. Skill zasugeruje gotowe komponenty z Radix UI, które możesz skopiować bezpośrednio do swojego kodu.
Do stylowania używaj utility-first podejścia Tailwind CSS. Opisz, jaki wygląd chcesz osiągnąć (kolory, rozmiary, responsywność), a skill wygeneruje odpowiednie klasy Tailwind.
Jeśli potrzebujesz implementować dark mode lub dostosować motywy, skorzystaj z tokenów projektowania Tailwind. Skill pomoże ci ustawić spójne kolory i typografię w całej aplikacji.
Do szybkiego prototypowania i generowania projektów wizualnych (plakaty, materiały brandingowe) użyj warstwy canvas. Skill wspiera tworzenie złożonych wzorów UI takich jak tabele danych, wykresy czy palety poleceń.
Pamiętaj, że komponenty shadcn/ui działają na zasadzie copy-paste — komponenty żyją w Twoim kodzie z pełnym wsparciem TypeScript i typowaniem.