Tailwind Best Practices

This one keeps your Tailwind styling consistent across the Mastra Playground UI packages. It enforces five priority-ordered rules: reuse existing components from the design system instead of creating new ones, stick to tokens from tailwind.config.ts without modifications, and avoid arbitrary values or className overrides on design system components (except for height and width on specific components like DialogContent). Use it when writing or reviewing component code to prevent token drift and maintain the design system's integrity. The priority system is smart, it tells you which rules matter most for automated refactoring. Honestly, this is the kind of constraint that feels restrictive at first but saves you from a sprawling mess of one-off styles six months down the road.

Install to Claude Code

npx -y skills add mastra-ai/mastra --skill tailwind-best-practices --agent claude-code