Tailwind expert
The official Ortus AI Skills repo
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 author says it does
Copied from the file, not written here
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.
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
Gives 0 of the 12 instructions most css styling skills give in 431 tokens
Counted across 586 of the 596 authors here whose files we hold, read 2026-08-06
- avoid excessive centered layoutsin 55 of 586, across 12 files
- bundle code into single HTML filein 54 of 586, across 14 files
- Respect prefers-reduced-motion user settingsin 52 of 586, across 35 files
- avoid purple gradientsin 51 of 586, across 11 files
- avoid uniform rounded cornersin 51 of 586, across 11 files
- avoid Inter fontin 51 of 586, across 11 files
- edit generated files to develop artifactin 50 of 586, across 10 files
- animate only transform and opacity propertiesin 43 of 586
- Make touch targets at least 44x44 pixelsin 41 of 586, across 15 files
- Ensure minimum color contrast of 4.5:1in 39 of 586, across 10 files
- use tailwind cssin 39 of 586, across 24 files
- Use SVG icons instead of emojisin 38 of 586, across 11 files
Said here and by no other author read
- define design tokens and semantic UI primitives
- configure tailwind for project scale
- build reusable class strategies
- validate responsive and interaction states
- reduce CSS entropy with linting rules
- keep utility usage readable with line breaks
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.