skills.rest
mastra-ai
mastra-aiOFFICIAL
Explore all skills by this author →
Website𝕏@mastraGitHub

tailwind-best-practices

Enforce Mastra design tokens and prevent arbitrary Tailwind values in playground UI styling.

27.1k|2.6k|Updated Aug 6, 2024
Search Tags:#refactor#tailwind#tokens#design-system#ui-styling#css-guidelines#playground-ui
One-click install
npx skills add https://github.com/mastra-ai/mastra --skill tailwind-best-practices
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-best-practices
Source: https://github.com/mastra-ai/mastra/tree/main/.claude/skills/tailwind-best-practices
Command: npx skills add https://github.com/mastra-ai/mastra --skill tailwind-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill standardizes Tailwind usage across the Mastra Playground UI, ensuring design-system alignment, accessibility, and maintainability.

Core Features & Use Cases

  • Enforces token-based colors, spacing, font sizes, radii, and other design tokens from the Mastra design system.
  • Validates avoidance of arbitrary Tailwind values and prevents overriding DS component styles to maintain visual consistency.
  • Provides a reference suite and guidelines for developers to align styling decisions across packages/playground-ui and packages/playground.

Quick Start

Review the guidelines in the references folder and apply them to styling changes throughout packages/playground-ui and packages/playground.

Frequently Asked Questions about tailwind-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce Tailwind design system consistency across UI packages?▼

Enforce Tailwind design system consistency by using only tokens defined in tailwind.config.ts and Mastra design tokens, avoiding arbitrary values, and preventing unauthorized overrides of DS components across packages.

Why should I avoid arbitrary Tailwind values in Mastra Playground UI styling?▼

Avoid arbitrary Tailwind values in Mastra Playground UI to maintain visual consistency, accessibility, and maintainability by requiring developers to use predefined design tokens instead of custom values.

What tokens are allowed when styling Mastra playground-ui components?▼

Allowed styling tokens are exclusively those defined in tailwind.config.ts and the Mastra design tokens located in packages/playground-ui/src/ds/tokens/, ensuring all color, spacing, font size, and radii values align with the design system.

Can I override design system component styles in packages/playground?▼

Overriding design system component styles in packages/playground is prevented to maintain visual consistency, requiring developers to follow reference guidelines and use established tokens rather than applying unauthorized style modifications.

Where can I find guidelines for standardizing Tailwind CSS usage in Mastra?▼

Find Tailwind CSS standardization guidelines in the references folder, which provides a suite of rules directing developers on applying token-based styling decisions throughout packages/playground-ui and packages/playground.

Related Skills

Explore More Software Engineering Skills→
akashic-devkitakashic-devkit
2

tailwind-best-practices

Enforce Tailwind CSS styling guidelines for the Mastra Playground UI.

Official
Intermediate
vuminhieuvuminhieu

vercel-react-best-practices

Apply Vercel performance best practices to React and Next.js code reviews.

Community
Advanced
bingeli1379bingeli1379
2

tailwind-best-practices

Enforce Tailwind CSS best practices for design-system alignment in Mastra Playground UI.

Community
Advanced
josecontijoseconti
12

Klytos CSS Classes

Define design tokens and CSS classes for consistent Klytos UI styling.

Community
Advanced