CtrlK
BlogDocsLog inGet started
Tessl Logo

tailwind-design-system

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

48

Quality

53%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/tailwind-design-system/SKILL.md

The canonical home for this skill is tailwind-design-system in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

40%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 skill is short and neatly sectioned, but its instructional content is abstract and non-executable, and its single progressive-disclosure reference points to a file that is not present in the bundle.

Suggestions

Replace the generic instruction bullets with concrete, executable guidance (e.g. token definition examples in tailwind.config.js, a component-variant pattern, a dark-mode setup snippet).

Either ship the referenced 'resources/implementation-playbook.md' with real patterns or remove the dangling reference so navigation is not broken.

Add a minimal ordered workflow with a validation checkpoint (e.g. build tokens -> apply variants -> verify accessibility/contrast) instead of vague 'apply best practices' advice.

DimensionReasoningScore

Conciseness

The body is lean and sectioned with no concept over-explanation, but the opening line repeats the frontmatter description verbatim and the generic instruction bullets add little, so minor trimming is possible.

4 / 5

Actionability

Instructions are high-level platitudes ('Apply relevant best practices and validate outcomes', 'Provide actionable steps and verification') with no concrete code, commands, or specific steps, and the only detailed source referenced (implementation-playbook.md) does not exist.

2 / 5

Workflow Clarity

No real sequenced workflow is present — the 'Instructions' bullets are generic advice rather than ordered steps, and there are no validation checkpoints, leaving many gaps.

2 / 5

Progressive Disclosure

Sections are reasonably organized, but the sole detailed reference points to a missing 'resources/implementation-playbook.md' (no bundle directory exists), so the navigation promise is broken rather than merely thin.

2 / 5

Total

10

/

20

Passed

Description

66%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 specific and well-targeted to Tailwind design systems, but it omits any explicit 'Use when...' trigger guidance, which limits its completeness and leaves the activation context implicit.

Suggestions

Add an explicit trigger clause, e.g. 'Use when creating a component library with Tailwind, implementing design tokens/theming, or migrating a codebase to Tailwind CSS.'

Include a few concrete artifact keywords users would name, such as 'tailwind.config.js', utility classes, or component variants.

Ensure the description triggers on synonyms like 'Tailwind utility classes' or 'CSS design system' to broaden natural phrase coverage.

DimensionReasoningScore

Specificity

Names the domain ('Tailwind CSS', 'design systems') plus several concrete sub-actions — 'design tokens, component variants, responsive patterns, and accessibility' — giving good concrete coverage with only minor gaps versus a fully comprehensive list.

4 / 5

Completeness

Provides a clear 'what' but no explicit 'when'/'Use when...' trigger guidance, so per the judging guideline a missing use-when clause caps completeness at 3.

3 / 5

Trigger Term Quality

Includes strong natural keywords a user would say ('Tailwind CSS', 'design system', 'design tokens', 'responsive', 'accessibility') but omits common synonyms and concrete file/config artifacts like tailwind.config.js, leaving a few natural terms missing.

4 / 5

Distinctiveness Conflict Risk

The 'Tailwind CSS' anchor carves a clear niche distinct from general CSS or framework skills, with only minor overlap risk against closely related UI/design-system skills.

4 / 5

Total

15

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
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.