tailwind-design-system

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

Quality

34%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/tailwind-design-system/SKILL.md

Quality

Content

18%Scale 1-5

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

This skill is essentially a placeholder with no actionable content. It provides no Tailwind CSS-specific guidance, no code examples, no concrete workflows, and no design token patterns. All substance is deferred to a resource file that doesn't exist in the bundle, leaving Claude with nothing executable to work with.

Suggestions

Add concrete, executable examples of Tailwind design system patterns: design token configuration in tailwind.config.js, component variant examples using class-variance-authority or similar, and responsive/dark mode patterns.

Replace the generic Instructions bullets with a specific workflow for building a design system (e.g., 1. Define tokens in config → 2. Create base components → 3. Add variants → 4. Validate accessibility → 5. Document usage).

Either provide the referenced `resources/implementation-playbook.md` file or inline the essential patterns directly in the SKILL.md.

Remove the trivially obvious 'Do not use this skill when' section and the generic instruction bullets to improve conciseness.

Dimension	Reasoning	Score
Conciseness	The 'Use this skill when' and 'Do not use this skill when' sections add some value but the 'Do not use' section is trivially obvious. The Instructions section is generic boilerplate ('Clarify goals, constraints, and required inputs') that doesn't add Tailwind-specific value. Some padding but not severely verbose.	3 / 5
Actionability	The skill provides zero concrete code, commands, examples, or Tailwind-specific guidance. Instructions like 'Apply relevant best practices and validate outcomes' are entirely vague. Everything actionable is deferred to a resource file that doesn't exist in the bundle.	1 / 5
Workflow Clarity	There is no meaningful workflow defined. The four bullet points under Instructions are generic platitudes ('Clarify goals', 'Apply best practices', 'Provide actionable steps') with no sequencing, no validation checkpoints, and no concrete steps for building a design system.	1 / 5
Progressive Disclosure	The skill references `resources/implementation-playbook.md` for detailed patterns, which is a reasonable structure in theory. However, the bundle confirms no such file exists, making the reference broken. The SKILL.md itself contains almost no substantive content to serve as an overview, so the split is premature — there's nothing useful at the top level.	2 / 5
	Total	7 / 20 Passed

Description

50%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.

The description identifies a clear domain (Tailwind CSS design systems) and lists relevant topic areas, but lacks concrete action verbs and a 'Use when...' clause. The listed capabilities read as category labels rather than specific operations, and the absence of trigger guidance limits Claude's ability to reliably select this skill at the right time.

Suggestions

Add an explicit 'Use when...' clause with trigger phrases like 'Use when the user asks about Tailwind CSS components, utility classes, theme configuration, or tailwind.config setup'.

Replace broad category nouns with concrete actions, e.g., 'Generates Tailwind utility class compositions, creates component variant systems using CVA or class-variance-authority, configures tailwind.config.js theme tokens'.

Include natural synonyms and related terms users might say, such as 'utility classes', 'Tailwind theme', 'tailwind.config', 'CSS framework', or 'Tailwind UI'.

Dimension	Reasoning	Score
Specificity	Names the domain (Tailwind CSS design systems) and lists several areas (design tokens, component variants, responsive patterns, accessibility), but these read more like topic categories than concrete actions. The only verb is 'Build', and the listed items are broad concepts rather than specific operations like 'generate color scales' or 'create button variant classes'.	3 / 5
Completeness	The 'what' is present (build design systems with Tailwind CSS including specific aspects), but there is no 'when' clause at all. There's no 'Use when...' or equivalent trigger guidance, which per the rubric caps completeness at 3.	3 / 5
Trigger Term Quality	Includes 'Tailwind CSS', 'design tokens', 'component variants', 'responsive patterns', and 'accessibility' which are relevant keywords. However, it misses natural user phrases like 'Tailwind components', 'utility classes', 'theme configuration', 'tailwind.config', 'CSS framework', or file extensions. Users might say 'style a component with Tailwind' which wouldn't strongly match.	3 / 5
Distinctiveness Conflict Risk	The Tailwind CSS focus provides some distinction, but 'design systems', 'responsive patterns', and 'accessibility' are broad enough to overlap with general CSS skills, UI component skills, or accessibility-focused skills. The combination narrows it somewhat but could still conflict with generic frontend or CSS skills.	3 / 5
	Total	12 / 20 Passed

Validation

90%

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 — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: skills/tailwind-design-system/SKILL.md
Commit: debb2ec

Reviewed: 20 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.