tailwind-design-system
Buduj skalowalne systemy designu z Tailwind CSS, tokenami i bibliotekami komponentów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do tworzenia produkcyjnych systemów designu opartych na Tailwind CSS. Pozwala zdefiniować hierarchię tokenów designu (od brandowych przez semantyczne do komponentowych), budować komponenty z wariantami i stanami, oraz implementować responsywne wzorce UI. Idealne do standaryzacji interfejsów w dużych projektach, migracji na Tailwind, a także konfiguracji dark mode i schematów kolorów. Wspiera dostępność i ułatwia utrzymanie spójności wizualnej w całej aplikacji.
Jak używać
Zainstaluj skill tailwind-design-system w swoim projekcie agenta lub środowisku MCP. Upewnij się, że masz dostęp do pliku tailwind.config.ts w swoim repozytorium.
Zdefiniuj hierarchię tokenów designu w konfiguracji Tailwind. Zacznij od tokenów brandowych (np. kolory podstawowe), następnie utwórz tokeny semantyczne (primary, secondary, destructive, accent) mapujące się na zmienne CSS, a na koniec tokeny komponentowe dla konkretnych elementów UI.
Skonfiguruj plik tailwind.config.ts, dodając rozszerzenia do sekcji theme. Użyj zmiennych CSS (hsl) dla kolorów semantycznych, aby umożliwić dynamiczną zmianę schematów. Włącz dark mode z opcją "class" dla przełączania między motywami.
Zbuduj komponenty bazowe z wariantami, rozmiarami i stanami. Struktura powinna przebiegać od stylów bazowych, przez warianty (np. primary, secondary), rozmiary (sm, md, lg) aż do stanów (hover, focus, disabled) i nadpisań.
Wdrażaj komponenty w swoim kodzie, korzystając z zdefiniowanych tokenów i wariantów. Zapewni to spójność wizualną i ułatwi przyszłe aktualizacje systemu designu w całym projekcie.
Testuj responsywność i dostępność komponentów, wykorzystując wbudowane narzędzia Tailwind. Sprawdzaj działanie dark mode i upewnij się, że wszystkie warianty komponentów działają prawidłowo na różnych urządzeniach.