Tailwind Design System skill: what it does and how to install it
Builds design systems with Tailwind CSS v4, including CSS-first design tokens, reusable component patterns and responsive theming.
Summary generated from the skill's documentation.
Install
$ npx skills add wshobson/agents --skill tailwind-design-systemRun it in a terminal. If your agent is already running, start a new session so it picks the skill up.
About this skill
What it does. Sets up Tailwind CSS v4 using CSS-first configuration and semantic design tokens, then applies a component structure of base styles, variants, sizes and states. It covers responsive and accessible patterns, dark mode, and migration from Tailwind v3.
When to use it. When creating a Tailwind component library, standardising UI patterns, implementing tokens and themes, or moving a project from Tailwind v3 to v4.
History
Repo stars
40.2k
Tracking since . A chart appears once there are 7 days of data.
Installs
67.4k
Tracking since . A chart appears once there are 7 days of data.
Installs via skills.sh
Similar skills
- Expo Design SystemBuilds a design system inside an Expo app: design tokens for colour, spacing and type, plus component variant conventions.
- Figma Generate LibraryBuilds or updates a design system in Figma from a codebase: variables, tokens and component libraries with variants.
- Figma Generate LibraryBuilds and updates Figma design systems from codebases, covering tokens, themes, component libraries and documented foundations.