tailwind-ui_skill

Overview

This skill provides expert Tailwind CSS guidance for building consistent, accessible, and performant UI components. It focuses on utility-first composition, responsive mobile-first patterns, dark mode, and component extraction to keep styles maintainable. Use it to design, diagnose, or validate Tailwind-based implementations against strict patterns and failure modes.

How this skill works

I inspect component markup and utility class usage, recommend compositional patterns, and flag anti-patterns that harm accessibility or performance. For creation tasks I follow the provided patterns guidance; for diagnosis I highlight sharp edges that cause failures; for reviews I validate inputs against explicit validation rules. When conflicts arise, I correct recommendations to align with the reference rules.

When to use it

• Creating new components with Tailwind utility classes and responsive behavior
• Refactoring repeated utility sets into reusable components
• Diagnosing visual, accessibility, or performance regressions in Tailwind CSS code
• Implementing dark mode variants and theme-safe color choices
• Validating markup and utility usage against strict style rules before release

Best practices

• Start mobile-first and apply breakpoint modifiers progressively
• Compose with utilities; extract components only when patterns repeat
• Prefer theme values and extend the design system rather than overriding
• Purge unused classes and avoid arbitrary values for predictable output
• Ensure sufficient contrast, visible focus states, and reduced-motion options

Example use cases

• Convert a messy set of utility classes into a small, documented component pattern
• Review a UI for missed responsive breakpoints and suggest fixes
• Audit classes that cause large generated CSS and propose purging strategies
• Adjust color tokens and dark mode variants to meet contrast requirements
• Validate a component against strict rules and return precise fixes