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.

61

Quality

77%

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

Fix and improve this skill with Tessl

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

Quality

Content

61%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 delivers an excellent executable v4 Quick Start and a useful migration table, with a well-signaled pointer to the detailed patterns file. Its weaknesses are redundant conceptual exposition, no explicit workflow or validation step for the multi-step design-system process, and a reference tier that under-advertises its own contents.

Suggestions

Cut the 'Core Concepts' section and the 'When to Use This Skill' list (which duplicates the frontmatter description); replace with a one-line workflow sequence such as '1. Define @theme tokens 2. Add base styles 3. Build components (see references/details.md) 4. Verify the CSS build'.

Move the four @keyframes definitions out of the Quick Start into references/advanced-patterns.md, keeping only one example animation inline to demonstrate the --animate-* + @keyframes pairing.

In the 'Detailed patterns' section, enumerate the contents of references/details.md (CVA components, compound components, form components, responsive grids) and add a direct pointer to references/advanced-patterns.md so both reference files are reachable in one hop.

DimensionReasoningScore

Conciseness

The body is mostly efficient executable code, but 'Core Concepts' explains token hierarchy and component architecture Claude already knows, the 'When to Use This Skill' section duplicates the frontmatter description, and ~40 lines of keyframe definitions are inlined in the top-level file where a trimmed token set would do. It is not score 4 because these trimmable sections amount to more than minor over-explanation.

3 / 5

Actionability

The Quick Start is fully executable copy-paste CSS and the v3-to-v4 table gives concrete migration mappings, so guidance is mostly executable. It falls short of 5 because the central task (building component variants) has no inline example — it is deferred to references/details.md — and no build or verify command is given.

4 / 5

Workflow Clarity

The workflow (define tokens → set up theme → build components → apply patterns) is only implied by section ordering; no explicit step sequence and no validation checkpoint (e.g., compiling with the v4 CLI to confirm the theme resolves) appear anywhere. Not score 2 because the Quick Start and Key v4 Changes table do give a coherent implied path, but checkpoints are entirely missing, capping it at 3.

3 / 5

Progressive Disclosure

Good structure: executable config lives inline, and references/details.md is one hop away with a clear read-when signal ('Read that file when the navigation tier above is insufficient'). Minor gaps keep it from 5: references/advanced-patterns.md is only reachable through a second hop inside details.md, and the top-level pointer does not enumerate what details.md covers (CVA components, forms, grids).

4 / 5

Total

14

/

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, good natural trigger terms, and a clearly named technology niche. Its main weaknesses are a single-verb action list and trigger phrases that drop the 'Tailwind' qualifier, slightly weakening distinctiveness and keyword coverage.

DimensionReasoningScore

Specificity

The description lists several concrete artifacts ('design tokens, component libraries, and responsive patterns') built with a named technology (Tailwind CSS v4), but the action vocabulary is essentially one verb ('Build') applied to objects, leaving minor coverage gaps versus the comprehensive multi-action anchor.

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 three concrete trigger phrases, matching the top anchor. Score 4 would apply only if the 'when' were vague or weakly implied, which it is not.

5 / 5

Trigger Term Quality

Good natural keyword coverage: 'component libraries', 'design systems', 'UI patterns', and 'Tailwind CSS v4' are phrases users would naturally say. A few natural terms are missing, such as 'theming', 'dark mode', 'design tokens' as a trigger, and 'styling'.

4 / 5

Distinctiveness Conflict Risk

'Tailwind CSS v4' carves out a clear niche, but the 'Use when' triggers ('implementing design systems, or standardizing UI patterns') omit Tailwind and could fire for non-Tailwind styling or general design-system skills, creating 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

whimzyLive/nightshift-ai

Path

.agents/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.