Tailwind Claude skill review: Tailwind Design System verdict, safety and alternatives
Tailwind Design System is wshobson's Agent Skill for Tailwind CSS v4 themes and shadcn-style components. Our verdict is Conditional, 68/100, at Low confidence, with safety grade A.
- Skill
- Tailwind Design System (tailwind-design-system)
- Publisher
- wshobson (wshobson/agents)
- Verdict
- Conditional
- Score
- 68/100
- Confidence
- Low
- Safety grade
- A
- Best for
- React and Next.js teams starting a shadcn-style library on Tailwind v4 who review output by hand
- Poor fit
- Pasting component examples unreviewed into accessibility-audited products
- Reviewed version
- no version tag (commit 156b7a5)
- Review date
- 2026-09-30
- Verified in
- none
- Claimed
- Claude Code · Gemini CLI · Antigravity
- Status
- checked 2026-10-21, no change; v3-era classes still present
Get the skill: tailwind-design-system folder on GitHub · SKILL.md at the reviewed commit · skills.sh listing
What is the Tailwind Design System skill for Claude?
The Tailwind Design System skill is wshobson's Agent Skill for Tailwind CSS v4 design systems. It covers @theme tokens, OKLCH colours, class-based dark mode and shadcn-style CVA React components.
An Agent Skill is a folder of instructions that an agent loads when a task matches. Read how Agent Skills load for the mechanics. This one targets front-end developers using Claude Code or similar agents on React and Next.js projects.
Tailwind CSS v4 is the CSS-first release of the Tailwind utility framework. Its configuration lives in CSS, through @theme tokens and @custom-variant rules. OKLCH is a perceptual colour space that CSS supports natively. CVA (class-variance-authority) is a library that maps component variants to class lists.
| Field | Value |
|---|---|
| Publisher | wshobson |
| Path | plugins/frontend-mobile-development/skills/tailwind-design-system |
| Plugin and marketplace | frontend-mobile-development in claude-code-workflows |
| Licence | MIT |
| Version | No version tag |
| Reviewed commit | 156b7a5 (folder last changed 2026-09-28) |
| Files | 3: SKILL.md (5,290 bytes), references/details.md, references/advanced-patterns.md |
| Sample stack | React 19, CVA, clsx, tailwind-merge, Radix Slot/Dialog, lucide-react |
| GitHub stars | 40,125 at review; 41,292 on 2026-10-21 |
| Forks | 4,282 at review; 4,396 on 2026-10-21 |
| Contributors | 83 (repository) |
| skills.sh installs | 66.7K |
Listings disagree on two facts. On 2026-10-21, the agenticskills.io page showed "v1.7.0" and 3 contributors. The repository has no version tag, and GitHub reports 83 contributors.
How does it compare with other Tailwind skills for Claude?
Other Tailwind skills for Claude exist. We have evaluated only wshobson's. The other rows repeat what their own pages showed on 2026-10-21.
| Skill | Publisher | Focus | Install | Our verdict |
|---|---|---|---|---|
| Tailwind Design System | wshobson | v4 tokens, dark mode, CVA components | npx skills add with --skill tailwind-design-system |
Conditional, 68 |
| claude-skills (Tailwind v4 among others) | secondsky | Collection: Cloudflare, React, Tailwind v4, AI | Repository | Not evaluated |
| tailwindcss kit skill | blencorp/claude-code-kit | Framework kit with auto-activation | Repository CLI | Not evaluated |
| skill-tailwind | rekryt | v4 CSS-first, utility-first vs BEM + @apply | git clone into ~/.claude/skills/ |
Not evaluated |
| Tailwind CSS | timelessco | Utility-first design (mcpmarket listing) | Download | Not evaluated |
| daisyUI skill | saadeghi/daisyui | daisyUI component classes on Tailwind | npx skills add saadeghi/daisyui --agent claude-code --yes |
Not evaluated |
How do you tell wshobson's original from the copies?
GitHub code search finds 932 SKILL.md files named tailwind-design-system, the original included. Same-name copies sit under sickn33, baotoq and zebbern, among others.
- Check the path:
plugins/frontend-mobile-development/skills/tailwind-design-system. - Check the publisher: the repository owner is wshobson.
- Check the marketplace: the plugin installs from
claude-code-workflows.
Is the Tailwind Design System skill worth installing?
Yes, the Tailwind Design System skill is worth installing as a scaffold you review: 68/100, Conditional, Low confidence. Its Quick Start is correct Tailwind v4. Its components still use v3-era classes, such as outline-none, that silently change behaviour.
The SKILL.md Quick Start uses one CSS import, @theme tokens with keyframes and @custom-variant dark. A short v3-to-v4 table covers the changes agents most often get wrong. The component layer in references/details.md mirrors older shadcn code.
It fits:
- React and Next.js teams starting a shadcn-style library on Tailwind v4.
- Teams that want a token and dark-mode scaffold and will review it by hand.
It does not fit:
- Teams pasting component examples unreviewed into accessibility-audited products.
- Non-React stacks (Vue, Svelte, server templates) that need more than the CSS layer.
| Dimension | Score | Basis |
|---|---|---|
| Effectiveness | 70 | Accurate Quick Start; v3-era component classes; no measured result |
| Reliability | 65 | Stale classes compile without errors, so failures stay silent |
| Safety | 95 | Markdown only; three third-party audits pass |
| Efficiency | 72 | About 1,322 tokens on load |
| Compatibility | 75 | Plain SKILL.md; React-only examples |
| Maintainability | 80 | Active repo with 83 contributors |
| Setup friction | 85 | One-line install; no keys |
| Tailwind v4 syntax accuracy | 66 | Directives correct; outline-none, shadow-sm, bg-gradient-to-r, max-w-screen-* stale |
| Accessibility of generated components | 62 | ARIA wiring present; focus outline removed |
| Internal consistency | 65 | Checklist and examples disagree on keyframes |
| Instruction weight vs value | 72 | Modest load; much standard shadcn boilerplate |
| Cost of adoption | 78 | Needs React 19, CVA, clsx, tailwind-merge and Radix |
| Maintainer responsiveness | 80 | PR #735 fixed this skill's dead link |
Confidence is Low because the evidence is thin. Read why confidence is Low.
For broader options, compare the best UI and frontend design skills.
How many tokens does the Tailwind Design System skill use?
The Tailwind Design System skill loads about 1,322 tokens, and about 3,988 with both references. Our estimate for a typical task is 12,000 input and 4,000 output tokens, or 14,322 input with the skill file loaded.
| What | Tokens |
|---|---|
| Skill file, loaded each time the skill runs | 1,322 (SKILL.md, 5,290 bytes) |
| Whole folder, with both references | 3,988 |
| One typical task (v4 theme + 3 components), our estimate | 12,000 input, 4,000 output |
| One typical task, including the skill file | 14,322 input, 4,000 output |
The hidden cost is review time. Someone has to replace outline-none, shadow-sm and max-w-screen-* before shipping. React samples need rewriting for other frameworks.
Is the Tailwind Design System skill safe to install?
Yes, the Tailwind Design System skill is safe to install, with safety grade A. It is three Markdown files with no scripts, hooks, network calls or credentials. Three skills.sh audits pass it.
What we found at commit 156b7a5:
- No scripts, hooks, MCP configs or agent manifests.
- No network or environment-variable indicators in the folder.
- No external content read, so no prompt-injection handling is needed.
- One sample ThemeProvider that writes the chosen theme to localStorage in your app. The skill itself writes nothing.
- Three passing audits on skills.sh: Gen Agent Trust Hub, Socket and Snyk.
The safety score is 95. Run your own checks to run before installing a skill on any copy you pick up.
What does the community report about the Tailwind Design System skill?
The community reports about the Tailwind Design System skill are thin. The strongest evidence is the pinned files themselves. The maintainer repaired a dead link in PR #735, and Tessl's static review scores 76%.
We weighed 10 dated reports: 5 positive, 3 neutral and 2 negative. Three are strong.
| Source | Date | Finding | Sentiment | Strength |
|---|---|---|---|---|
| SKILL.md at 156b7a5 | 2026-09 | Valid v4 directives: @import, @theme tokens with keyframes, @custom-variant dark | Positive | Strong |
| details.md at 156b7a5 | 2026-09 | outline-none, v3 shadow-sm and max-w-screen-* in components | Negative | Strong |
| advanced-patterns.md at 156b7a5 | 2026-09 | Legacy bg-gradient-to-r; keyframe and popover contradictions | Negative | Weak |
| wshobson/agents PR #735 | 2026-09 | Repaired this skill's dead link to advanced-patterns.md | Positive | Strong |
| wshobson/agents PR #743 | 2026-09 | Gardener flags dangling reference paths in all skills | Positive | Weak |
| wshobson/agents PR #693 | 2026-09 | gh skill and npx skills installers, with smoke tests | Positive | Weak |
| Tessl quality page | 2026-09 | Static review 76%; repetitive keyframes; unstepped migration workflow | Neutral | Weak |
| Tessl evals page | 2026-09 | No task evaluations run | Neutral | Weak |
| skills.sh skill page | 2026-09 | About 66.7K installs; three audits pass | Positive | Weak |
| arXiv 2608.23067 | 2026-08 | Across 31 WebDev skills, injection cut Pass@2 by 1.3 to 4.2% | Neutral | Weak |
The arXiv study does not name this skill. It found that example-heavy WebDev skills underperformed.
What are the Tailwind Design System skill's known failures?
*The Tailwind Design System skill's main failure is v3-era classes in its v4 components. Its focus-visible:outline-none class drops the forced-colors outline. Its container samples use max-w-screen- widths missing from v4's max-width reference.**
Our review names the worst failure in these words:
The agent produces v3-era utilities that compile without error but silently change behaviour, such as focus indicators vanishing in forced-colors mode or containers losing their max width.
Forced-colors mode is the high-contrast setting in Windows. It hides box-shadow focus rings and keeps only outlines.
focus-visible:outline-noneon Button and Input. Tailwind v4 renamed the old behaviour tooutline-hidden.- v3
shadow-smsizing, one step larger in v4. bg-gradient-to-r, a legacy name in v4.max-w-screen-*container widths, absent from the v4 max-width reference.- Keyframes placement that contradicts the skill's own checklist.
- A dialog comment that names the native popover API over code that uses Radix Dialog.
| In the skill | v4 | Effect if left |
|---|---|---|
outline-none |
outline-hidden |
Focus outline vanishes in forced-colors mode |
shadow-sm |
shadow-xs |
Shadow one step larger than intended |
bg-gradient-to-r |
bg-linear-to-r |
Legacy name |
max-w-screen-* |
Not in the v4 max-width reference | Container loses its max width |
The v4 names come from the Tailwind v4 upgrade guide, fetched 2026-10-20. On 2026-10-21, references/details.md still held 8 lines with outline-none or max-w-screen.
Does the Tailwind Design System skill work in Cursor, Codex and other agents?
No, no agent is verified for the Tailwind Design System skill. Claude Code, Gemini CLI and Antigravity are claimed. Its repo ships Cursor and Codex-style packaging, but no run is documented.
| Agent | Status | Source |
|---|---|---|
| Claude Code | Claimed | Claude marketplace file |
| Gemini CLI | Claimed | Installer in PR #512 |
| Antigravity | Claimed | — |
| Cursor | Packaging present, no run documented | .cursor-plugin/marketplace.json (PR #541) |
| Codex, OpenCode | Packaging present, no run documented | .agents/plugins/marketplace.json (PR #541) |
| Verified agents | None | — |
PR #541 added the multi-harness marketplace on 2026-05-22. The agenticskills.io listing names Claude, Codex and Cursor. Packaging shows where the plugin installs. It does not show that the skill behaves the same there.
How do you install the Tailwind Design System skill?
Install the Tailwind Design System skill with npx skills add https://github.com/wshobson/agents --skill tailwind-design-system. In Claude Code, add the wshobson/agents marketplace and install the frontend-mobile-development plugin. No keys or configuration are needed.
- Run the skills.sh command for this skill alone:
npx skills add https://github.com/wshobson/agents --skill tailwind-design-system- Use the short form from agenticskills.io as an alternative:
npx skills add wshobson/agents@tailwind-design-system- Add the marketplace in Claude Code, then install the whole plugin:
/plugin marketplace add wshobson/agents
/plugin install frontend-mobile-development@claude-code-workflows- Use
gh skill installas a fourth route, supported since PR #693.
The agenticskills.io manual curl copies SKILL.md only. It leaves out both reference files. The setup friction score is 85. For folders and scopes, see how to add skills to Claude Code.
How do you use the Tailwind Design System skill?
*Use the Tailwind Design System skill by asking for a v4 theme or variant components. It supplies tokens, dark mode and CVA patterns. Replace outline-none and max-w-screen- before shipping, then check forced-colors focus.**
The skill serves two primary tasks and one secondary task:
- Bootstrap a v4 CSS-first theme with semantic OKLCH tokens and dark mode. This primary task runs once per project.
- Generate shadcn-style CVA components such as Button, Card, Input and Label. This primary task recurs weekly during a library build.
- Migrate a Tailwind v3 project to v4. Tessl notes the migration lacks step-by-step validation.
Clean up the output before shipping:
- Replace
outline-nonewithoutline-hidden, and keep a visible outline on focus. - Replace
max-w-screen-*with a width from the v4 max-width reference. - Swap
shadow-smforshadow-xswhere the v3 size was intended. - Rename
bg-gradient-to-rtobg-linear-to-r. - Test focus in forced-colors mode.
Test it yourself:
Ask an agent with the skill to build a Button and Container in a fresh Tailwind v4 project, then check forced-colors focus and the container's computed max-width.
What are the alternatives to the Tailwind Design System skill?
The closest evaluated alternative to the Tailwind Design System skill is the official shadcn skill: Conditional, 64/100. It manages shadcn/ui components on Tailwind. The secondsky and Vercel collections have no verdict from us yet.
| Alternative | Publisher | Our verdict | Focus |
|---|---|---|---|
| shadcn skill verdict | shadcn (shadcn-ui/ui) | Conditional, 64 | shadcn/ui components on Tailwind |
| Web Design Guidelines review | Vercel Labs | Conditional, 66 | UI review against guidelines |
| claude-skills | secondsky | Not evaluated | Collection with Tailwind v4 |
| agent-skills | vercel-labs | Not evaluated | Collection of frontend skills |
The shadcn skill fits teams already on shadcn/ui. Web Design Guidelines reviews UI, while this skill builds it. See all frontend design skills ranked for the full field.
Common questions
The design hub linked above ranks the design skills we have reviewed. For building a skill of your own, read the skill-creator verdict.
Does the Tailwind Design System skill support Tailwind v3?
No. It targets v4 and includes a v3-to-v4 mapping table for upgrades.
Does the Tailwind Design System skill work outside React?
Partly. The CSS layer works in any stack, while the component samples are React-only.
Is the Tailwind Design System skill free?
Yes. It carries the MIT licence, and installing it costs nothing.
Is this the official Tailwind skill?
No. It is wshobson's community skill, not one from Tailwind Labs.
Where is the Tailwind Design System skill on GitHub?
It sits at plugins/frontend-mobile-development/skills/tailwind-design-system in wshobson/agents. Learn what a SKILL.md contains before you read it.
Is there a Tailwind MCP server instead?
Our evidence covers no Tailwind MCP server. Read about skills versus MCP servers for how the two differ.