tailwind-design-system
CSS-first design system framework for Tailwind v4 with tokens, components, and responsive patterns.
What it does
- Creating a component library with Tailwind v4
- Implementing design tokens and theming with CSS-first configuration
- Building responsive and accessible components
- Standardizing UI patterns across a codebase
- Migrating from Tailwind v3 to v4
- Setting up dark mode with native CSS features
Requirements & configuration
- | require("tailwindcss-animate") | CSS @keyframes in @theme + @starting-style for entry animations |
- 1. Design Token Hierarchy
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
CSS-first design system framework for Tailwind v4 with tokens, components, and responsive patterns.
Source
Repository: https://github.com/wshobson/agents
tailwind-design-system FAQ
What does the tailwind-design-system skill do?
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. Creating a component library with Tailwind v4 Implementing design tokens and theming with CSS-first configuration
What does tailwind-design-system require?
| require("tailwindcss-animate") | CSS @keyframes in @theme + @starting-style for entry animations | 1. Design Token Hierarchy
How do I install tailwind-design-system?
Run: npx -y skills add https://github.com/wshobson/agents --skill tailwind-design-system --agent claude-code — the source lives at github.com/wshobson/agents.
Maintain tailwind-design-system?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/wshobson-agents-tailwind-design-system?ref=badge) npx agentictools info skills/wshobson-agents-tailwind-design-system The second line is the CLI lookup for this page — handy in READMEs and docs.
Related skills
typescript-advanced-types Advanced TypeScript type system patterns for building type-safe, reusable components and utilities.
opentui Build terminal user interfaces with three framework options: imperative core API, React reconciler, or Solid reconciler.
frontend-design Distinctive, production-grade frontend interfaces that reject generic AI aesthetics through intentional design direction.
react:components Agent skill from google-labs-code/stitch-skills.
gws-gmail-send Send emails via Gmail with support for attachments, HTML formatting, and send-as aliases.
building-native-ui Complete guide for building native Expo apps with routing, styling, components, and platform conventions.