Tailwind Design System skill for Claude Code: Tailwind CSS v4 design tokens

A skill from wshobson/agents that makes Claude build design systems with Tailwind CSS v4 tokens, variants and dark mode.

Installs: 71.5K; on skills.sh
Stars: 42.1K; on GitHub
Files: 2; besides SKILL.md
Updated: Oct 2026; last repo commit

When you ask for a Tailwind component library, design tokens, theming or a v3 to v4 migration, Claude loads this skill. It sets up CSS-first configuration with @import "tailwindcss" and @theme, defines colour tokens in OKLCH, adds class-based dark mode with @custom-variant, and builds components in a fixed order: base styles, variants, sizes, states, overrides.

The skill states: "This skill targets Tailwind CSS v4 (2024+)." For v3 projects it points to the Tailwind upgrade guide. It bundles two reference files for deeper patterns and no scripts.

Good for

Front-end developers building a component library on Tailwind v4
Teams moving a project from Tailwind v3 to v4
Developers who want consistent tokens, dark mode and responsive patterns

Install tailwind-design-system

Claude Code

Copy this prompt.

Install the tailwind-design-system skill in Claude Code. Run this command:

npx skills add https://github.com/wshobson/agents --skill tailwind-design-system

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Sections in SKILL.md

When to Use This Skill
Key v4 Changes
Quick Start
Core Concepts
1. Design Token Hierarchy
2. Component Architecture
Detailed patterns and worked examples

Key facts

Author: wshobson (plugin: frontend-mobile-development)
Repository: wshobson/agents
Installs on skills.sh: 71,531 (2 Nov 2026)
GitHub stars (repo): 42,081 (2 Nov 2026)
License: MIT
Last commit (repo): 30 Oct 2026
What installs: SKILL.md plus references/details.md and references/advanced-patterns.md (3 files); bundles no scripts
Part of: The frontend-mobile-development plugin in wshobson/agents
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Table of v3 patterns and their v4 replacements
tailwind.config.ts becomes @theme in CSS, the three @tailwind lines become @import "tailwindcss", and dark mode uses @custom-variant.
Read · Key v4 changes
Semantic colour, radius and animation tokens in @theme
Claude writes tokens such as background, foreground, primary, muted, destructive, border and ring in OKLCH, plus radius and fade or slide animation tokens.
Try: “Set up a Tailwind v4 theme with light and dark tokens for my app.”
Write · Quick start theme
Class-based dark variant with token overrides
Claude adds `@custom-variant dark` and overrides the colour tokens under a .dark class.
Write · Dark mode
Brand tokens, then semantic tokens, then component tokens
Claude layers tokens so components use purpose-based names such as bg-primary.
Read · Design token hierarchy
Base styles, variants, sizes, states, overrides
Claude builds each component in that order.
Read · Component architecture
CVA, compound, form and responsive grid patterns
Claude reads this file when SKILL.md is not enough. It holds four worked patterns (CVA components, compound components for React 19, form components, a responsive grid system) and utility functions.
Read · references/details.md
Native CSS animations, dark mode, v4 utilities and a migration checklist
A second bundled file with patterns 5 and 6 (native CSS animations, dark mode with CSS), then @utility, theme modifiers, namespace overrides, semi-transparent colours, container queries, a v3 to v4 migration checklist, and do and don't lists. The SKILL.md text does not link to it.
Read · references/advanced-patterns.md

From the official docs

Questions

What does the Tailwind Design System skill do?

It makes Claude build a design system with Tailwind CSS v4. That means CSS-first config, @theme tokens, dark mode, component variants and responsive, accessible patterns.

Does it work with Tailwind v3?

It is written for v4. The SKILL.md says it targets Tailwind CSS v4 and points v3 projects to the Tailwind upgrade guide. It also lists migrating from v3 to v4 as a use.

How do I install it?

Use the install box at the top of this page. The repo README also documents installing a single skill with gh skill install wshobson/agents <skill> (GitHub CLI 2.90 or later) or the npx skills installer. These install the skill without the plugin's agents, commands or hooks.

Does it need an API key or network access?

No key or account is mentioned in the SKILL.md. Tailwind itself installs from npm in your project, as usual.

Is it safe to install?

It is low risk. It is instructions and CSS examples with no scripts. You still review the code and config Claude writes, especially if it migrates an existing project from v3.

Is it part of a plugin?

Yes. The skill lives in the frontend-mobile-development plugin of the wshobson/agents repo. The README says that repo holds 94 plugins, with agents, skills and commands for several coding tools.

Information

updated Nov 2, 2026

Repository: wshobson/agents
Folder: plugins/frontend-mobile-development/skills/tailwind-design-system

wshobson/agents skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

tailwind-design-system SKILL.md · github.com
wshobson/agents README · github.com
github.com · github.com
github.com · github.com