tailwind-best-practices

Name: tailwind-best-practices
Availability: InStock
Author: kimenzo

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

Ready to run

npx skills add https://github.com/Kimenzo/96000Agents --skill tailwind-best-practices-kimenzo

💬 Prompt for ChatGPT / Claude Chat▼

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.