Tailwind expert
Use when designing, implementing, or refactoring Tailwind CSS systems for consistency, scale, and performance. Invoke for utility composition, design tokens, theme extension, responsive strategy, accessibility styling, and class management patterns.From its SKILL.md
npx -y skills add Ortus-Solutions/skills --skill tailwind-expertAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its file declares
Copied from the file, not written here
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
2.7 KB, 431 tokens by cl100k_base, as published. Nobody here has run it
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
- Define design tokens and semantic UI primitives
- Configure Tailwind for project scale and framework integration
- Build reusable class strategies for repeated patterns
- Validate responsive, focus, and interaction states
- 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 with arbitrary values by default
- Do not overuse important variants
- Do not duplicate utility bundles without abstraction strategy
Output Templates
## Tailwind Refactor
- Problem pattern: [description]
- Target utility pattern: [pattern]
- Theme updates: [token changes]
- Accessibility checks: [checks]
Knowledge Reference
tailwind config, theme extension, utility composition, responsive variants, focus-visible, aria-driven classes, dark mode strategy, class sorting, purge/content config, design tokens
Related Skills
vuejs-expertbootstrap-expertvite-expertcode-reviewer
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.