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.

Install with Tessl CLI

npx tessl i github:wshobson/agents --skill tailwind-design-system

What are skills?

Review — 78%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Validation — 10 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Discovery

92%

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 strong skill description that clearly articulates capabilities and usage triggers. It uses third person voice correctly, includes specific technology (Tailwind CSS v4), and provides an explicit 'Use when...' clause. The only weakness is potential overlap with other frontend/styling skills, though the Tailwind v4 specificity helps mitigate this.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions: 'Build scalable design systems', 'design tokens', 'component libraries', and 'responsive patterns'. Specifies the technology (Tailwind CSS v4) and concrete deliverables.	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 explicit triggers.	3 / 3
Trigger Term Quality	Includes natural keywords users would say: 'Tailwind CSS', 'design tokens', 'component libraries', 'responsive patterns', 'design systems', 'UI patterns'. These are terms developers naturally use when discussing this domain.	3 / 3
Distinctiveness Conflict Risk	While Tailwind CSS v4 is specific, terms like 'component libraries' and 'UI patterns' could overlap with general frontend or React component skills. The design system focus helps but isn't fully distinct from other CSS/styling skills.	2 / 3
	Total	11 / 12 Passed

Implementation

64%

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

This is a highly actionable skill with excellent, production-ready code examples for Tailwind v4 design systems. The main weaknesses are its length (could benefit from splitting into overview + reference files) and lack of explicit validation/debugging guidance for the migration workflow. The v3-to-v4 migration table is particularly well done.

Suggestions

Split detailed patterns (CVA components, compound components, form components, etc.) into a separate PATTERNS.md file, keeping only 1-2 examples in the main skill

Add a 'Verification' section with steps to confirm the theme is working: checking CSS variables in DevTools, testing dark mode toggle, validating color tokens render correctly

Move the extensive CSS theme configuration to a separate THEME-REFERENCE.md file, keeping only a minimal quick-start example inline

Dimension	Reasoning	Score
Conciseness	The skill is comprehensive but includes some unnecessary explanations (e.g., explaining what OKLCH is for 'better color perception'). The migration table and v3/v4 comparison are efficient, but the extensive code examples could be trimmed or moved to separate reference files.	2 / 3
Actionability	Excellent actionability with fully executable, copy-paste ready code examples throughout. Every pattern includes complete TypeScript/CSS implementations with proper imports, types, and usage examples.	3 / 3
Workflow Clarity	The migration checklist provides clear steps, but the overall document lacks explicit validation checkpoints. For a design system skill involving CSS configuration changes, there's no guidance on verifying the theme is working correctly or debugging common issues.	2 / 3
Progressive Disclosure	The document is quite long (~500 lines) with all content inline. Patterns 1-6 and Advanced v4 Patterns could be split into separate reference files. The structure is good with clear sections, but the monolithic nature makes it harder to navigate.	2 / 3
	Total	9 / 12 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
skill_md_line_count	SKILL.md is long (875 lines); consider splitting into references/ and linking	Warning

	Total	10 / 11 Passed

Reviewed: about 19 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.