CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

60

Quality

70%

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

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

Well-organized and actionable v4 reference with a solid migration table and executable config, but it inlines a bulky theme block that belongs in a reference and leaves one bundle file unlinked, hurting token efficiency and navigation.

Suggestions

Move the full @theme/dark-mode/keyframes CSS block into references/ (e.g. details.md) and keep only a minimal token example inline in Quick Start to improve conciseness.

Add an explicit link to references/advanced-patterns.md from the body so neither bundle file is orphaned and navigation is one level deep throughout.

Tighten the 'Core Concepts' ASCII diagrams or fold them into the detailed-patterns reference, since they restate concepts Claude already knows about token hierarchy.

DimensionReasoningScore

Conciseness

Mostly efficient prose, but the Quick Start inlines a ~130-line full theme/dark-mode/keyframes CSS block that largely belongs in a reference file, so the token budget could be tightened.

3 / 5

Actionability

The app.css block is copy-paste ready and executable, and the v3→v4 change table gives concrete migration guidance, though concrete component examples live only in the referenced file.

4 / 5

Workflow Clarity

Sections progress logically (When to Use → Quick Start → Core Concepts → Detailed patterns) but there is no explicit multi-step sequence or checkpoints; acceptable for a reference-style skill but not a clear workflow.

3 / 5

Progressive Disclosure

Structure exists and references/details.md is clearly signaled one level deep, but the large inlined theme CSS should be split out and references/advanced-patterns.md is an unreferenced orphan not linked from the body.

3 / 5

Total

13

/

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 answers both 'what' and 'when' with concrete triggers and a specific Tailwind v4 niche. Slightly lacking in action-verb specificity and synonym coverage.

DimensionReasoningScore

Specificity

Lists several concrete capabilities — 'design tokens, component libraries, and responsive patterns' — but these are topic areas rather than distinct executable actions, leaving minor coverage gaps.

4 / 5

Completeness

Explicitly states what it does ('Build scalable design systems with Tailwind CSS v4, design tokens...') and when to use it via a concrete 'Use when creating component libraries, implementing design systems, or standardizing UI patterns' clause.

5 / 5

Trigger Term Quality

Includes natural phrases users would say ('creating component libraries', 'implementing design systems', 'standardizing UI patterns') plus the specific 'Tailwind CSS v4', but misses common synonyms like 'theming' or 'UI kit'.

4 / 5

Distinctiveness Conflict Risk

The Tailwind CSS v4 niche with design-system triggers is mostly distinct from generic CSS skills, with only minor overlap risk against sibling frontend/component 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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
whimzyLive/nightshift-ai
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.