tailwind-design-system

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.

Quality

81%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

75%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A highly actionable, executable Tailwind v4 design-system guide with strong structure and a working reference file. Its main weakness is token cost from a large duplicated inline CSS block and one orphaned bundle file that is not linked from the body.

Suggestions

Move the full dark-mode token override block (and possibly the @keyframes definitions) into references/details.md, keeping only a representative subset inline in Quick Start.

Add an explicit pointer to references/advanced-patterns.md in the body (e.g. an 'Advanced patterns' section) so both bundle files are discoverable from the overview.

Add a brief verify/build checkpoint after the Quick Start configuration so users can confirm the theme compiles (e.g. 'run your build and confirm utility classes like bg-primary resolve').

Dimension	Reasoning	Score
Conciseness	Mostly efficient with tight tables and short concept sections, but the inline Quick Start CSS duplicates a full light-theme token set, a full dark-theme override set, and four complete @keyframes blocks — repetitive token-heavy content that could be tightened or moved to references.	3 / 5
Actionability	Provides fully executable, copy-paste-ready CSS covering @theme tokens, @custom-variant dark mode, animation tokens with keyframes, and @layer base styles, plus a concrete v3→v4 migration table.	5 / 5
Workflow Clarity	A clear 'When to Use → Key v4 Changes → Quick Start → Core Concepts' flow with concrete configuration steps; not a destructive/batch operation so no validation checkpoint is required, but there is no explicit verify/build step for the setup.	4 / 5
Progressive Disclosure	Good overview structure with a one-level-deep pointer to references/details.md that exists as a real bundle file, but references/advanced-patterns.md is present yet never linked from the body, and the large inline theme block could arguably live in a reference.	4 / 5
	Total	16 / 20 Passed

Description

87%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, third-person description that clearly states both capabilities and explicit use-when triggers tied to a well-scoped Tailwind v4 niche. Minor room to expand specificity and trigger synonyms, but it answers what and when concretely.

Dimension	Reasoning	Score
Specificity	Lists several concrete capabilities ('Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns') but bundles them into one 'Build...with' construction rather than enumerating many discrete actions, leaving minor coverage gaps.	4 / 5
Completeness	Explicitly answers both 'what' ('Build scalable design systems with...') and 'when' ('Use when creating component libraries, implementing design systems, or standardizing UI patterns') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural terms users would say ('component libraries', 'design systems', 'design tokens', 'responsive patterns', 'standardizing UI patterns', 'Tailwind CSS v4') with good coverage, but misses common synonyms or file/extension-style variations.	4 / 5
Distinctiveness Conflict Risk	The 'Tailwind CSS v4' niche plus design-system/component-library triggers carve a clear, distinct scope with minimal overlap risk against other skills.	5 / 5
	Total	18 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: wshobson/agents
Path: plugins/frontend-mobile-development/skills/tailwind-design-system/SKILL.md
Commit: d6837ae

Reviewed: about 12 hours ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.