ui-styling

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

1. 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.

2. 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.

3. 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.

4. 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.

5. 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ń.

6. Pamiętaj, że komponenty shadcn/ui działają na zasadzie copy-paste — komponenty żyją w Twoim kodzie z pełnym wsparciem TypeScript i typowaniem.