tailwind-best-practices
Tailwind CSS styling guidelines for Mastra Playground UI. This skill should be used when writing, reviewing, or refactoring styling code in packages/playground-ui and packages/playground to ensure design system consistency. Triggers on tasks involving Tailwind classes, component
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Tailwind CSS styling guidelines for Mastra Playground UI. This skill should be used when writing, reviewing, or refactoring styling code in packages/playground-ui and packages/playground to ensure design system consistency. Triggers on tasks involving Tailwind classes, component styling, or design tokens.
How to use
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ł.