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.48x

Quality

77%

Does it follow best practices?

Impact

92%

1.48x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./tests/ext_conformance/artifacts/agents-wshobson/frontend-mobile-development/skills/tailwind-design-system/SKILL.md

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

Quality

Content

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

The content is a strong, highly actionable reference with executable v4 code and a clear migration checklist. Its main weakness is monolithic inlining of large component/theme examples that would benefit from one-level-deep reference files, and a lack of explicit validation steps.

Suggestions

Split the full component implementations (Button/Card/Input/Dialog/ThemeProvider) and the complete @theme CSS into reference files referenced one level deep, keeping SKILL.md as a tighter overview to improve progressive disclosure.

Trim inline commentary that restates what the code shows (e.g., 'v4 uses native CSS variables', 'React 19: No forwardRef needed') to tighten conciseness.

Add an explicit validation/verification step to the migration checklist (e.g., 'build and confirm no @tailwind directives or tailwind.config references remain') to strengthen workflow clarity.

Dimension	Reasoning	Score
Conciseness	The body largely assumes Claude's competence with no basic-concept padding, but carries minor trimmable commentary (e.g., 'v4 uses native CSS variables', 'React 19: No forwardRef needed') that could be tightened, placing it above 3 but short of the lean 5-anchor.	4 / 5
Actionability	Provides fully executable, copy-paste-ready code across the common cases — complete @theme CSS, Button/Card/Input/Dialog components, ThemeProvider, and a cn utility — matching the anchor for comprehensive executable examples.	5 / 5
Workflow Clarity	Sequencing is clear via the Quick Start -> Core Concepts -> Patterns -> v3-to-v4 Migration Checklist flow, but no explicit validation/verification checkpoints are given; this is acceptable for a non-destructive patterns skill yet falls short of the feedback-loop 5-anchor.	4 / 5
Progressive Disclosure	No bundle files exist and the ~870-line SKILL.md inlines substantial content (full component implementations, full theme CSS) that could live in separate reference files; section structure is good but references are absent rather than one-level-deep.	3 / 5
	Total	16 / 20 Passed

Description

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

The description is well-constructed: third-person, concise, and explicitly pairs a concrete 'what' with a 'Use when' trigger clause. It would reach the top band with more varied action verbs and broader synonym coverage in the trigger terms.

Suggestions

Lead with more varied, concrete verbs (e.g., 'Scaffold component libraries, define design tokens, and wire up responsive/accessible patterns') to lift specificity toward 5.

Broaden trigger terms with natural synonyms users say, such as 'Tailwind UI', 'shadcn/ui', 'theming', or 'design tokens', to improve trigger-term coverage.

Differentiate the 'when' clause from the 'what' clause so the trigger phrases read as distinct user utterances rather than restating the capabilities.

Dimension	Reasoning	Score
Specificity	Lists several concrete capability areas ('design tokens, component libraries, and responsive patterns') but the verb is generic ('Build... with') and the items are objects more than distinct actions, landing above the 3-anchor but below the comprehensive 5-anchor.	4 / 5
Completeness	Clearly answers both 'what' ('Build scalable design systems with...') and 'when' ('Use when creating component libraries, implementing design systems, or standardizing UI patterns'), though the 'when' triggers largely restate the 'what' rather than adding distinct user-mentionable phrases.	4 / 5
Trigger Term Quality	Includes natural phrases users would say ('component libraries', 'design systems', 'UI patterns', 'Tailwind CSS v4'), but misses common synonyms/variants like 'Tailwind UI', 'shadcn', or theme-related terms.	4 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (Tailwind v4 design systems) with distinct triggers and only minor overlap risk with general CSS/Tailwind skills.	4 / 5
	Total	16 / 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 (875 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: Dicklesworthstone/pi_agent_rust
Path: tests/ext_conformance/artifacts/agents-wshobson/frontend-mobile-development/skills/tailwind-design-system/SKILL.md
Commit: 6453c0b

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