tailwind-design-system

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

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

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

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

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

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

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