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.
Styling guidelines for the Mastra Playground UI, containing 5 rules across 3 categories. Rules are prioritized by impact to guide automated refactoring and code generation. These rules ensure design system consistency, prevent token drift, and maintain component library integrity.
packages/playground-uipackages/playgroundReference these guidelines when:
Rules are prioritized by impact:
| Priority | Category | Impact |
|---|
| 1 | Component Usage | CRITICAL |
| 2 | Design Tokens | CRITICAL |
| 3 | ClassName Usage | HIGH |
Component Usage:
@playground-ui/ds/components/ (component-use-existing)ds/ folderDesign Tokens:
tailwind.config.ts in @playground-ui (tokens-use-existing)tailwind.config.ts (tokens-no-modification)ClassName Usage:
height and width (classname-no-arbitrary)className prop on DS components except h-/w- on DialogContent and Popover (classname-no-ds-override)Full documentation with code examples is available in:
references/tailwind-best-practices-reference.md - Complete guide with all patternsreferences/rules/ - Individual rule files organized by categoryTo look up a specific pattern, grep the rules directory:
grep -l "component" references/rules/
grep -l "token" references/rules/
grep -l "className" references/rules/
references/rules/component-* - Component usage rules (1 rule)tokens-* - Design token rules (2 rules)classname-* - ClassName usage rules (2 rules)