CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

64

Quality

81%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

68%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 body is well organized with executable, version-current v4 configuration and appropriately offloads detailed patterns to a clearly signaled reference file. Weaknesses center on the absence of an explicit stepwise workflow with validation checkpoints, and one bundle file (advanced-patterns.md) being orphaned from the navigation tier.

Suggestions

Add an explicit stepwise workflow with validation checkpoints for the primary tasks — e.g., the v3→v4 migration (audit config → convert theme → verify build compiles → test dark mode) — since "Migrating from Tailwind v3 to v4" is listed as a use case but no procedure is given in the body.

Reference references/advanced-patterns.md from the navigation tier (alongside the details.md pointer) so its migration checklist and animation/theme-modifier patterns are discoverable rather than orphaned.

Include one minimal inline component-variant example (e.g., a CVA-style button using the semantic tokens) so the core "creating component libraries" use case is actionable without first opening the reference file.

Trim the four near-identical @keyframes blocks in the Quick Start to one or two exemplars to cut body size without losing the pattern.

DimensionReasoningScore

Conciseness

The prose is lean and the Quick Start CSS is executable configuration rather than padding, but the ~130-line block repeats four near-identical @keyframes definitions and the "Core Concepts" ASCII diagrams restate generic design-token knowledge Claude already has.

4 / 5

Actionability

The Quick Start CSS is copy-paste ready and the v3→v4 migration table gives concrete syntax mappings, but the headline use case ("creating component libraries") has no inline component or variant example — it is delegated entirely to references/details.md.

4 / 5

Workflow Clarity

The sequence is only loosely implied (Quick Start → Core Concepts → details.md) with no explicit steps or validation checkpoints, and the listed "Migrating from Tailwind v3 to v4" use case has no stepwise procedure in the body — the migration checklist lives in an unreferenced file.

3 / 5

Progressive Disclosure

references/details.md exists and is clearly signaled one level deep, and the body is well sectioned, but references/advanced-patterns.md (animations, theme modifiers, migration checklist) is present in the bundle yet never referenced, making it undiscoverable.

4 / 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 description with an explicit what-and-when structure and concrete, version-pinned trigger phrases. Its main weaknesses are a single generic action verb carrying all capabilities and some missing natural trigger synonyms (theming, dark mode, styling).

DimensionReasoningScore

Specificity

The description names several concrete deliverables — "design tokens, component libraries, and responsive patterns" under "Tailwind CSS v4" — but a single generic verb ("Build") carries all of them and "scalable" is mild fluff, so it falls just short of comprehensive multi-action coverage.

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, matching the top anchor.

5 / 5

Trigger Term Quality

"design systems", "design tokens", "component libraries", "UI patterns", and "Tailwind CSS v4" are phrases users would naturally say, but common variations like "theming", "dark mode", "styling", or "Tailwind config" are missing.

4 / 5

Distinctiveness Conflict Risk

"Tailwind CSS v4" pins a clear niche, but the trigger phrases "design systems", "component libraries", and "UI patterns" could also fire on non-Tailwind design-system requests, leaving minor overlap risk with closely related skills.

4 / 5

Total

17

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

wshobson/agents

Path

plugins/frontend-mobile-development/skills/tailwind-design-system/SKILL.md

Reviewed

Table of Contents

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.