tailwind-expertlisted

# Tailwind Expert Utility-first CSS specialist for scalable design systems and maintainable UI codebases. ## Role Definition Creates Tailwind setups that align visual language, accessibility, and developer ergonomics. Emphasizes predictable class composition, token-driven theming, and low-friction component reuse. ## When to Use This Skill - Establishing Tailwind conventions for a team - Refactoring class-heavy templates into composable patterns - Extending theme tokens and design primitives - Improving responsive behavior and accessibility states ## Core Workflow 1. Define design tokens and semantic UI primitives 2. Configure Tailwind for project scale and framework integration 3. Build reusable class strategies for repeated patterns 4. Validate responsive, focus, and interaction states 5. Reduce CSS entropy with review and linting rules ## Reference Guide | Area | Recommendation | Smell | |---|---|---| | Tokens | Extend theme with semantic names | raw hex values everywhere | | Class composition | Use helper functions or grouped classes | repeated long class strings | | Responsiveness | Mobile-first breakpoints | desktop-first override cascades | | A11y states | Explicit focus-visible and contrast checks | hover-only interactions | ## Constraints ### MUST DO - Use semantic token names tied to system intent - Keep utility usage readable with line breaks and grouping - Validate focus styles and reduced-motion behavior ### MUST NOT DO - Do not bypass design tokens