What the tech

Search

Browse topics

/ opens search from anywhere. Esc closes it.

Tools
What the tech
Get the newsletter

tailwind-design-system: a Claude Code skill by Seth Hobson

For developers setting up a component library or design tokens on Tailwind CSS v4. Skip it if your project stays on Tailwind v3.

Copy install command View the source
Score
76of 100
Rank
#99of 239
Installs
73Kon skills.sh
Security
Clear 5 scanners
Updated
2026
Context
~58tokens always

Install

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

Run it in your terminal. View the source

Using the Claude app rather than Claude Code? You can add a skill there too. How to add it in the app

What does tailwind-design-system do?

tailwind-design-system is a Claude skill that helps Claude build a design system on Tailwind CSS v4 with its CSS-first setup. It shows how v3 habits map to v4: tailwind.config.ts becomes an @theme block in CSS, the @tailwind directives become a single import of tailwindcss, and class-based dark mode uses @custom-variant. Its starter app.css defines semantic color tokens in OKLCH, radius tokens, fade and slide keyframes, and dark overrides under a .dark class. It lays out a token ladder from brand to semantic to component tokens, and a component order of base, variants, sizes, states and overrides. Longer worked patterns sit in references/details.md.

When should you use tailwind-design-system?

Use it when

  • Starting a component library with Tailwind v4
  • Moving a project from Tailwind v3 to v4
  • Adding dark mode with design tokens

Skip it when

  • Your project does not use Tailwind
  • You want a ready-made component kit, not patterns

What it needs and what it can touch

You need

  • Tailwind CSS v4 in your project

From reading its instructions, not from running it.

Why it scores 76

Strongest on upkeep (100 of 100), weakest on adoption (58).

  • Adoption35 points 58
  • Upkeep20 points 100
  • Trust20 points 65
  • Quality15 points 100
  • Reader answers10 points Not enough answers yet, so this does not count

How the formula works

Is tailwind-design-system safe to install?

Every scanner that checked it passed it. Scanners often miss what other scanners catch, and a skill can change after a scan. Read its source before you install it.

ScannerResultDate
Gen Agent Trust HubPassedSep 29, 2026
SocketPassedSep 29, 2026
SnykLow riskSep 29, 2026
RunlayerPassedMar 8, 2026
ZeroLeaksPassedApr 16, 2026

Details

Installs
72,977
Repository stars
42,407
Last repository change
Tokens always loaded
about 58
Tokens when used
about 1,251
License
MIT
Data confidence
High

Alternatives to tailwind-design-system

All skills for this job

  • shadcn-ui

    For React developers setting up shadcn/ui components, Zod forms and Tailwind themes.

    Score 64 22.7K installs

    Get shadcn-ui

  • design-system

    For designers and front-end developers setting up design tokens or making on-brand HTML pitch decks.

    Score 77 51.5K installs

    Get design-system

  • shadcn

    For React developers on shadcn/ui who want Claude to add and compose components through the CLI.

    Score 93 415K installs Official

    Get shadcn

  • baseline-ui

    For developers using Tailwind and React who want AI-built screens tidied to a strict house style.

    Score 69 26.3K installs

    Get baseline-ui