skills.rest
Kimenzo
KimenzoCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-best-practices

Enforce Tailwind CSS design system rules for Mastra Playground UI components.

Updated Feb 27, 2026
Search Tags:#code quality#frontend#design system#css#tailwind#ui development
One-click install
npx skills add https://github.com/Kimenzo/96000Agents --skill tailwind-best-practices-kimenzo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-best-practices
Source: https://github.com/Kimenzo/96000Agents/tree/main/.claude/skills/tailwind-best-practices
Command: npx skills add https://github.com/Kimenzo/96000Agents --skill tailwind-best-practices-kimenzo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all Tailwind CSS usage within the Mastra Playground UI adheres to established design system guidelines, preventing inconsistencies and maintaining code quality.

Core Features & Use Cases

  • Component Usage Enforcement: Guides developers to use existing design system components and prevents the creation of new ones in protected directories.
  • Design Token Adherence: Mandates the use of predefined design tokens for colors, spacing, etc., and prohibits their modification.
  • ClassName Restrictions: Limits arbitrary Tailwind values and prevents overriding styles on design system components.
  • Use Case: When refactoring the styling of a dashboard widget, this Skill will flag any instances where custom colors are used instead of design tokens or where new, unapproved components are introduced.

Quick Start

Review the provided Tailwind CSS code against the established best practices for consistency.

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 CSS design system consistency in frontend code?▼

Tailwind CSS consistency is enforced by validating component usage, design token adherence, and className patterns against predefined rules, preventing arbitrary values and unapproved component creation in protected directories.

How do I stop developers from overriding design system components with custom styles?▼

Overriding design system components is prevented by applying styling guidelines that restrict arbitrary Tailwind values and flag instances where custom colors are used instead of predefined design tokens during code validation.

What is the best way to refactor UI component styling without breaking token adherence?▼

Refactoring UI component styling while maintaining token adherence requires validating className patterns against established rules, ensuring no unapproved components are introduced and predefined colors or spacing are not modified.

Does Tailwind CSS design token enforcement work with existing playground UI components?▼

Tailwind CSS design token enforcement works with existing playground UI components by validating code within specific packages to ensure design system consistency, preventing the modification of predefined tokens and guiding developers to use approved components.

Why does my frontend code fail validation when using arbitrary Tailwind values?▼

Frontend code fails validation when using arbitrary Tailwind values because the styling guidelines limit these values to maintain design system consistency and prevent overriding styles on existing components with unapproved custom properties.

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
RafayelGardishyanRafayelGardishyan

check

Run golangci-lint, Biome, and svelte-check quality checks before commits.

Community
Intermediate
HemanthTennetiHemanthTenneti

normalize

Normalize frontend UI components to match design system standards and tokens.

Community
Intermediate
joshuaculmerjoshuaculmer

Tailwind CSS

Apply utility-first Tailwind CSS classes to JSX elements for consistent UI styling.

Community
Intermediate