tailwind-best-practices

Original：🇺🇸 English
Translated

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.

2installs
Sourcemastra-ai/mastra
Added on

NPX Install

npx skill4agent add mastra-ai/mastra tailwind-best-practices

Tags

Translated version includes tags in frontmatter
tailwind-cssstyling-guidelinesreact-componentsdesign-systemplayground-ui

SKILL.md Content

View Translation Comparison →

Tailwind Best Practices

Overview

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.

Scope

  • packages/playground-ui
  • packages/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:
PriorityCategoryImpact
1Component UsageCRITICAL
2Design TokensCRITICAL
3ClassName UsageHIGH

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.ts
    in 
    @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 
    height
    and 
    width
    (
    classname-no-arbitrary
    )
  • No 
    className
    prop on DS components except 
    h-
    /
    w-
    on 
    DialogContent
    and 
    Popover
    (
    classname-no-ds-override
    )

References

Full documentation with code examples is available in:
  • references/tailwind-best-practices-reference.md
    - Complete guide with all patterns
  • references/rules/
    - Individual rule files organized by category
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)