Tailwind Design System

Tailwind Design System is a standalone skill from the official wshobson/agents repository. The directly reviewed primary source is https://github.com/wshobson/agents/tree/main/plugins/frontend-mobile-development/skills/tailwind-design-system; its SKILL.md is reachable and points to dedicated reference files for deeper examples. The repository is released under the MIT license according to its official LICENSE. This skill is not a new CSS runtime, a hosted component library, or a replacement for Tailwind CSS. It is an installable Markdown work guide that structures how a compatible coding agent designs and implements a frontend design system.

Purpose and boundary

According to the provider, the guidance targets Tailwind CSS v4 and its CSS-first configuration. Its scope covers design tokens, semantic colors, radii, animations, dark mode, component variants, accessibility, and responsive layouts. The source describes a token hierarchy that moves from abstract brand values through semantic purposes to component-specific values. That hierarchy lets a team plan changes to color, typography, spacing, or state in a central way instead of duplicating uncontrolled values across many components. The guidance is intended to standardize a codebase. It does not provide a finished corporate design or make binding brand decisions.

Tailwind CSS v4 and tokens

The SKILL.md explains the move from Tailwind CSS v3 to the v4 convention using @import "tailwindcss" and @theme instead of earlier configuration patterns. Tailwind's official documentation confirms that theme variables define design tokens which then generate utility classes. The source uses OKLCH color values, semantic names, and variables for radius and animation. This supports traceable themes and variants, but the consuming project must actually install Tailwind CSS v4 and validate generated classes in its real build.

Components and responsive patterns

The reference files include worked TypeScript patterns for CVA variants, compound components, form elements, responsive grids, containers, and dark mode. This is more than a generic prompt: the skill defines a reusable workflow, names concrete implementation boundaries, and bundles related references under an installable skill path. Tailwind's official responsive-design documentation says that responsive variants are applied mobile-first and combined with breakpoints. The skill's examples therefore need adaptation to the framework, React version, Radix dependencies, real browser support, and existing accessibility rules.

Responsibility and limits

A coding agent may read local files and prepare or execute code changes when the selected harness grants those tools. The skill itself has no server, account permission, or external data connection. Before write actions, confirm the target, scope, diff, and tests. Tokens, private design rules, and unreleased source should not be sent to a model provider unnecessarily. The guidance does not replace manual accessibility review, visual regression testing, browser-matrix testing, design approval, or security review. This classification was checked on September 10, 2026 against the exact repository path, SKILL.md, reference files, MIT license, and official Tailwind documentation.