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.

1.13x

Quality

78%

Does it follow best practices?

Impact

100%

1.13x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

The canonical home for this skill is tailwind-design-system in wshobson/agents

Quality

Content

72%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 thorough, highly actionable Tailwind v4 reference with copy-paste-ready component code across the common cases. Its main weaknesses are the absence of validation checkpoints in the migration workflow and a monolithic, all-inline structure that does not progressively disclose deeper material into separate files.

Suggestions

Add a verify/validate step (e.g., run the build or check the generated CSS) to the v3-to-v4 migration checklist and frame it as validate -> fix -> retry so the workflow can score higher.

Split the full component pattern implementations (button, card, dialog, theme provider) and the Advanced v4 Patterns section into one-level-deep reference files linked from SKILL.md, so the main file stays a lean overview.

Trim repeated commentary such as "React 19: No forwardRef needed" and the ASCII Core Concepts diagrams, or move them to a reference file, to tighten token efficiency.

Dimension	Reasoning	Score
Conciseness	The body is dense with executable, value-bearing code rather than concept filler, but repeated comments ("React 19: No forwardRef needed", "Simplified for v4") and the ASCII Core Concepts diagrams are minor over-explanation that could be trimmed, landing it just below a 5.	4 / 5
Actionability	Copy-paste-ready, fully executable code covers the common cases (button/CVA, card compound components, input/label with RHF+Zod, grid/container, dialog with native popover, theme provider) with concrete imports and usage examples.	5 / 5
Workflow Clarity	The v3-to-v4 Migration Checklist provides an ordered sequence of steps, but there are no validation/verification checkpoints or feedback loops, and the migration is a batch-style change, which caps clarity at 3 per the destructive/batch guidance.	3 / 5
Progressive Disclosure	The file is well-organized into clear sections (When to Use, Key v4 Changes, Quick Start, Patterns, Advanced, Migration, Best Practices), but at ~867 lines everything is inlined with no one-level-deep references, so content that could live in separate reference files (full component implementations, advanced patterns) is not split out.	3 / 5
	Total	15 / 20 Passed

Description

83%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 concrete user phrases. It is specific and actionable, with only minor gaps in keyword synonyms and slight overlap risk with adjacent UI skills.

Dimension	Reasoning	Score
Specificity	"Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns" lists several concrete capability areas (tokens, component libraries, responsive patterns), though they are ingredients of one build action rather than a list of distinct operations, so it falls just short of comprehensive 5.	4 / 5
Completeness	It explicitly 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 concrete trigger phrases.	5 / 5
Trigger Term Quality	Natural terms users would say appear ("design systems", "component libraries", "design tokens", "Tailwind CSS v4", "UI patterns"), but common variations such as "theming", "UI components", or "utility classes" are missing, so it is good but not comprehensive.	4 / 5
Distinctiveness Conflict Risk	The Tailwind CSS v4 + design-tokens niche is mostly distinct, but "component libraries" and "design systems" could overlap with general React/shadcn-style UI skills, leaving minor conflict risk.	4 / 5
	Total	17 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (867 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: calesthio/OpenMontage
Path: .agents/skills/tailwind-design-system/SKILL.md
Commit: 1bab711

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