styling

Skill zawierający standardy stylowania dla projektów opartych na Tailwind CSS i CSS. Wykorzystaj go podczas pisania styli, tworzenia komponentów interfejsu, przeglądania kodu CSS lub decydowania o strukturze elementów opakowujących. Skill kieruje Cię w stronę bezpośredniego stosowania klas do elementów semantycznych, eliminacji niepotrzebnych divów, prawidłowego użycia utility-first podejścia oraz implementacji stanów disabled z HTML i wariantami Tailwind. Bazuje na wzorcach z shadcn-svelte i Svelte 5.

1. Aktywuj skill w kontekście, gdy pracujesz nad stylowaniem komponentów UI w projekcie opartym na Tailwind CSS. Skill automatycznie zasugeruje się, gdy napiszesz "styluj to", "napraw CSS", "dodaj klasy" lub gdy będziesz tworzyć komponenty z utility-first podejściem.

2. Przed dodaniem nowego elementu opakowującego (wrapper div) sprawdź, czy klasy stylujące można zastosować bezpośrednio do istniejącego elementu semantycznego (main, section, article, div z rolą). Jeśli efekt wizualny będzie identyczny, pomiń wrapper — zmniejszy to złożoność HTML.

3. Przy łączeniu klas warunkowych używaj funkcji cn() z $lib/utils zamiast ręcznego konkatenowania stringów. Funkcja ta obsługuje konflikty klas i czyni kod bardziej czytelnym.

4. Dla stanów disabled preferuj atrybuty HTML disabled zamiast strażników JavaScript. Dodaj warianty Tailwind :disabled do elementów interaktywnych, aby uniknąć dodatkowej logiki kliknięcia w komponentach.

5. Stosuj konwencję background/foreground do definiowania kolorów oraz zmienne CSS do zapewnienia spójności motywu w całym projekcie. Unikaj hardkodowanych wartości kolorów — zawsze odwołuj się do zmiennych systemowych.

6. Gdy tworzysz warianty komponentów (różne rozmiary, stany, kolory), rozważ użycie biblioteki tailwind-variants zamiast ręcznego zarządzania klasami wariantów — uprości to utrzymanie i skalowanie.