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

71%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./plugins/frontend-mobile-development/skills/tailwind-design-system/SKILL.md

Quality

Content

64%

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

The skill provides genuinely useful Tailwind v4-specific configuration that Claude wouldn't know from training data, with executable CSS examples and a helpful migration table. However, the Quick Start section is bloated with repetitive color token definitions, the workflow guidance is abstract rather than step-by-step, and the content ends abruptly with a reference to a details file that isn't provided in the bundle.

Suggestions

Trim the Quick Start CSS by showing 2-3 representative color tokens with a comment like '/* Add remaining semantic tokens following this pattern */' instead of listing all 20+ tokens.

Add a concrete workflow for building a design system: e.g., 1. Define tokens → 2. Create base component → 3. Add variants → 4. Test dark mode → 5. Validate with browser dev tools, with specific validation steps.

Either provide the referenced `references/details.md` bundle file or inline the key patterns from it, since the skill currently cuts off before covering component variants, responsive patterns, and accessibility—all mentioned in the description.

Dimension	Reasoning	Score
Conciseness	The skill includes useful v4-specific information Claude wouldn't know, but the Quick Start section is very long with extensive color token definitions that are repetitive. The 'When to Use This Skill' section is somewhat unnecessary padding. The dark mode overrides duplicate nearly all the light mode tokens, adding bulk.	2 / 3
Actionability	The CSS code is fully executable and copy-paste ready. The v3-to-v4 migration table provides concrete before/after patterns. The @theme configuration, @custom-variant syntax, and @layer base styles are all directly usable in a real project.	3 / 3
Workflow Clarity	The 'Core Concepts' section outlines a design token hierarchy and component architecture sequence, but these are abstract descriptions rather than actionable workflows with validation steps. There's no clear step-by-step process for building a design system, no validation checkpoints, and no feedback loops for catching errors.	2 / 3
Progressive Disclosure	The skill references `references/details.md` for detailed patterns, which is good progressive disclosure structure. However, no bundle files are provided, so we can't verify the reference exists. The main file itself is somewhat monolithic with the large Quick Start CSS block inline rather than referenced, and the 'Core Concepts' section feels incomplete—it introduces hierarchies but cuts off abruptly before the referenced file.	2 / 3
	Total	9 / 12 Passed

Description

77%

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

This is a solid description that clearly communicates both what the skill does and when to use it, with specific technologies named. Its main weaknesses are moderate overlap risk with other frontend/CSS skills and missing some natural trigger term variations that users might employ. The explicit 'Use when' clause and concrete capability listing are strengths.

Suggestions

Add more natural trigger term variations users might say, such as 'Tailwind', 'theming', 'CSS variables', 'style guide', 'design language', or 'utility classes'.

Strengthen distinctiveness by clarifying what differentiates this from general Tailwind or general component library skills, e.g., specifying it focuses on system-level architecture rather than individual component styling.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions: 'Build scalable design systems', 'Tailwind CSS v4', 'design tokens', 'component libraries', 'responsive patterns'. These are concrete, actionable capabilities rather than vague language.	3 / 3
Completeness	Clearly answers both what ('Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns') and when ('Use when creating component libraries, implementing design systems, or standardizing UI patterns') with an explicit 'Use when' clause.	3 / 3
Trigger Term Quality	Includes good terms like 'Tailwind CSS v4', 'design tokens', 'component libraries', 'responsive patterns', and 'UI patterns', but misses common user variations like 'Tailwind', 'theme', 'CSS variables', 'style guide', 'design language', or file extensions. Users might say 'Tailwind' without 'v4' or ask about 'theming'.	2 / 3
Distinctiveness Conflict Risk	The mention of 'Tailwind CSS v4' and 'design tokens' provides some distinctiveness, but terms like 'component libraries' and 'UI patterns' could overlap with general frontend/React component skills or CSS styling skills. It could conflict with a general Tailwind CSS skill or a broader UI/component skill.	2 / 3
	Total	10 / 12 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 — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: wshobson/agents
Commit: cc37bfd

Reviewed: 3 days 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.