Tailwind
Tailwind skills for Claude, Cursor, and Grok Bot — compare before you install
Claude Tailwind skill options for agents: tailwind-design-system, tailwind-4-docs, tailwindcss, or unocss when the stack is UnoCSS. Open the SKILL.md, then install one for Claude, Cursor, or Codex. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.
Last reviewed 2026-10-24 · Methodology · How to choose · How to install
How an agent uses this
Install tailwind-design-system for Tailwind v4 tokens and components. Switch to unocss only when the project already runs UnoCSS. Do not load every utility file at once.
Default file: Tailwind Design System. Read the SKILL.md on that page before you install.
Install
npx skills add https://github.com/wshobson/agents/tree/HEAD/plugins/frontend-mobile-development/skills/tailwind-design-system Try asking
Using the tailwind-design-system skill, set up a Tailwind v4 @theme token system for this product UI, then style one real screen with those tokens. | Skill | When to use it | Platform | Updated | Safety |
|---|---|---|---|---|
| Tailwind Design System wshobson/agents | Default when you asked for a Tailwind v4 design system: tokens, @theme, component variants, or a v3→v4 migration of the system. | Any agent | 2026-05-22 | pass |
| Tailwind 4 Docs lombiq/tailwind-agent-skills | When you need Tailwind v4 documentation locally — picking utilities, variants, configuration, or checking v3→v4 gotchas. | Any agent | 2026-03-09 | pass |
| Tailwind CSS hairyf/skills | When you are styling with utility classes and need a structured Tailwind CSS reference (layout, type, theme variables). | Cursor | 2026-02-01 | pass |
| Unocss JetBrains/skills | When the project is on UnoCSS (or migrating from Tailwind toward Uno) and the agent must respect presets, shortcuts, and uno.config. | Any agent | 2026-04-08 | pass |
Safety is a text search on the file, not an audit. Pass / Review / Risk are explained in the evaluation guide.
-
01
Tailwind Design System
Will Hobson’s Tailwind v4 design-system skill. CSS-first @theme tokens, variants, and responsive patterns for a library. Use it to build or standardize the system. It is not a full docs dump of every utility, and it is not the shadcn CLI file.
npx skills add https://github.com/wshobson/agents/tree/HEAD/plugins/frontend-mobile-development/skills/tailwind-design-system -
02
Tailwind 4 Docs
Lombiq’s agent-oriented Tailwind v4 docs snapshot with indexing. Use it to answer “which class / how do I configure this” from a local docs set. It is not a token-system construction file.
npx skills add https://github.com/lombiq/tailwind-agent-skills/tree/HEAD/skills/tailwind-4-docs -
03
Tailwind CSS
Hairyf’s utility-first Tailwind reference generated from the public docs. Use it while composing classes and theme variables. It is not a full design-system playbook, and it is not Lombiq’s indexed docs skill.
npx skills add https://github.com/hairyf/skills/tree/HEAD/skills/tailwindcss -
04
Unocss
JetBrains-curated UnoCSS skill (Anthony Fu). Tailwind-compatible basics plus presets, transformers, and Vite/Nuxt setup. Use it when UnoCSS is the stack. Do not install it as a substitute for the Tailwind v4 design-system file on a pure Tailwind project.
npx skills add https://github.com/JetBrains/skills/tree/HEAD/unocss
FAQ
Which skill should I install first?
Start with tailwind-design-system when you are building tokens, themes, or a component library on Tailwind v4. Use tailwind-4-docs when the question is which utility, variant, or v3→v4 migration step to use. Use tailwindcss as a utility-class and theme-variable reference while styling. Use unocss when the project already runs UnoCSS.
Is this the same as shadcn?
No. shadcn is the component CLI playbook on the shadcn task. These files are about Tailwind utilities, tokens, and docs. Many shadcn projects use Tailwind underneath — install the file that matches the job you have. For visual direction beyond utilities, see the frontend design task.
Do I need all of them?
No. Install one default for the job. A design-system setup, a docs lookup, a utility reference, and UnoCSS will overlap if you load them all.
Can I use this with Grok Bot?
Yes. Paste the SKILL.md into Grok Bot or attach the file, then ask for the same job this page describes. MeloSkill is not affiliated with xAI. Grok Bot instructions: Grok Bot playbooks.