tailwind-best-practices
Spójne style Tailwind CSS dla interfejsu Mastra Playground — zasady projektowania i konsystencja designu.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill zawierający wytyczne stylowania Tailwind CSS dla interfejsu Mastra Playground. Pomaga pisać, przeglądać i refaktorować kod stylów w pakietach playground-ui i playground, zachowując spójność systemu designu. Obejmuje 5 reguł podzielonych na 3 kategorie: użycie komponentów, tokeny designu i użycie klas. Aktywuje się przy zadaniach związanych z klasami Tailwind, stylowaniem komponentów lub tokenami designu.
Jak używać
Zainstaluj skill tailwind-best-practices w swoim projekcie Mastra, dodając go do konfiguracji agenta lub Claude Playground.
Gdy pracujesz nad stylowaniem w pakietach packages/playground-ui lub packages/playground, odwołaj się do wytycznych przed napisaniem lub zmianą kodu CSS.
Stosuj reguły o najwyższym priorytecie najpierw: używaj istniejących komponentów z @playground-ui/ds/components/ zamiast tworzyć nowe w folderze ds/, oraz korzystaj wyłącznie z tokenów zdefiniowanych w tailwind.config.ts.
Przy przeglądzie kodu sprawdzaj, czy nie ma arbitralnych wartości Tailwind poza height i width, oraz czy className nie przesłania komponentów DS (z wyjątkiem h- i w- na DialogContent i Popover).
Uruchom skill podczas refaktoryzacji istniejących komponentów stylizowanych, aby zidentyfikować miejsca, gdzie kod odbiega od wytycznych i wymaga poprawy.
Odwołuj się do pełnej dokumentacji i przykładów kodu dostępnych w referencjach skill'u, gdy potrzebujesz szczegółowych wyjaśnień konkretnych reguł.