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 styling, or design tokens.
- Installs
- 2K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/mastra-ai/mastra --skill tailwind-best-practices- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads tailwind-best-practices automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Tailwind Best Practices
Overview
Routing and priority guide for Mastra Playground UI styling, containing 5 rules across 3 categories. Rule files hold the detailed explanations, examples, and review guidance that ensure design system consistency, prevent token drift, and maintain component library integrity.
Scope
packages/playground-uipackages/playground
When to Apply
Reference these guidelines when:
- Writing new React components with Tailwind styles
- Reviewing code for styling consistency
- Refactoring existing styled components
- Adding or modifying UI elements
Priority-Ordered Guidelines
Rules are prioritized by impact:
| Priority | Category | Impact |
|---|---|---|
| 1 | Component Usage | CRITICAL |
| 2 | Design Tokens | CRITICAL |
| 3 | ClassName Usage | HIGH |
Quick Reference
Critical Patterns (Apply First)
Component Usage:
- Use existing components from
@playground-ui/ds/components/(component-use-existing) - Never create new components in the
ds/folder
Design Tokens:
- Only use tokens from
tailwind.config.tsin@playground-ui(tokens-use-existing) - Never modify design tokens or
tailwind.config.ts(tokens-no-modification)
High-Impact Patterns
ClassName Usage:
- No arbitrary Tailwind values except
heightandwidth(classname-no-arbitrary) - No
classNameprop on DS components excepth-/w-onDialogContentandPopover(classname-no-ds-override)
References
Rule files are the canonical source for detailed guidance and examples:
references/tailwind-best-practices-reference.md- Rule catalog with category order and rule-file pathsreferences/rules/- Canonical individual rule files organized by category
Load only the relevant rule file when implementing or reviewing a specific styling rule. Use the catalog to choose the right rule without loading every example.
To look up a specific pattern, grep the rules directory:
grep -l "component" references/rules/
grep -l "token" references/rules/
grep -l "className" references/rules/
Rule Categories in references/rules/
component-*- Component usage rules (1 rule)tokens-*- Design token rules (2 rules)classname-*- ClassName usage rules (2 rules)
FAQ
What does the tailwind-best-practices skill do?
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 do I install tailwind-best-practices?
Run npx skills add https://github.com/mastra-ai/mastra --skill tailwind-best-practices in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tailwind-best-practices/ (personal) or .claude/skills/tailwind-best-practices/ (project).
Which AI agents can use tailwind-best-practices?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is tailwind-best-practices safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains tailwind-best-practices?
It is published by mastra-ai in mastra-ai/mastra, and it is an official skill from the maker of the technology it covers. It has 1,985 recorded installs.
More from mastra-ai/mastra
react-best-practices
mastra-ai/mastra
React performance optimization guidelines from Mastra Engineering. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.
ralph-plan
mastra-ai/mastra
Interactive planning assistant that helps create focused, well-structured ralph-loop commands through collaborative conversation
smoke-test
mastra-ai/mastra
Create a Mastra project using create-mastra and smoke test the studio in Chrome using Chrome MCP server
e2e-tests-studio
mastra-ai/mastra
REQUIRED when modifying any file in packages/playground-ui or packages/playground. Triggers on: React component creation/modification/refactoring, UI changes, new playground features, bug fixes affecting studio UI. Generates Playwright E2E tests that validate PRODUCT BEHAVIOR, not just UI states.
mastra-docs
mastra-ai/mastra
Open the skill to read its SKILL.md instructions.
tailwind-v4
mastra-ai/mastra
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.