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.
- skills.sh installs
- 2K
- GitHub stars
- 29.4K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add mastra-ai/mastra --skill tailwind-best-practices --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/mastra-ai/mastra
- Categories
- Frontend Development, Documentation, Code Review & Quality, Design & UI/UX
- First seen
- Apr 16, 2026
More from mastra-ai/mastra
All 6Recommended
More Frontend Development
ui-ux-pro-maxdavila7/claude-code-templatesUI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind,1.9Kskills.sh installs
chakra-ui-migratechakra-ui/chakra-uiMigrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound components, theming, recipes, 1.9Kskills.sh installs
ionic-angularcapawesome-team/skillsGuides the agent through Angular-specific patterns for Ionic app development. Covers project structure, standalone vs NgModule architecture detection, Angular R1.8Kskills.sh installs
ui-designstarchild-ai-agent/official-skillsUI/UX quality gate and build guide for every visual output — landing pages, dashboards, web apps, portfolios, and tools. ui-design remains the main entry point.1.8Kskills.sh installs
senior-frontendalirezarezvani/claude-skillsFrontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, an1.7Kskills.sh installsui-design-systemdavila7/claude-code-templatesUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handof1.7Kskills.sh installs