CtrlK
BlogDocsLog inGet started
Tessl Logo

tailwindcss

Use when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design.

70

Quality

85%

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

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

A compact, well-structured reference skill whose copy-paste-ready recipes and concrete pitfalls make it highly actionable. It is slightly held back by a 'Key concepts' cheat sheet of mostly-known facts and the absence of any external reference split for a body that marginally exceeds the simple-skill line.

Suggestions

Trim or move the 'Key concepts & patterns' variant-prefix enumeration into a condensed reference table, since Claude already knows sm:/md:/hover: syntax, to push conciseness toward the top anchor.

Consider extracting the 'Quick recipes' into a references/RECIPES.md file (one level deep, clearly signaled) to keep SKILL.md as a leaner overview and improve progressive_disclosure.

Add a brief explicit workflow note (e.g., 'pick a recipe -> adapt tokens -> verify responsive/dark variants render') to give the reference skill a clearer sequenced usage path.

DimensionReasoningScore

Conciseness

The body is lean and code-focused with no padding about what CSS or Tailwind is, but the 'Key concepts & patterns' section enumerates reference facts Claude largely already knows (variant prefixes like sm:, md:, hover:), keeping it just shy of the fully lean top anchor.

4 / 5

Actionability

It provides three copy-paste-ready, fully executable examples (CTA button, responsive hero, dynamic classname mapping) plus concrete pitfalls and explicit user questions, covering the common cases.

5 / 5

Workflow Clarity

Sections are clearly organized and the 'Common pitfalls' block offers a mini troubleshooting flow (classes not generated -> check content paths / avoid dynamic names), but this is a reference/recipe skill with no explicit multi-step sequence or validation checkpoints.

4 / 5

Progressive Disclosure

Content is well-organized into clearly labeled sections with all material appropriately inline for a compact reference, but at ~74 lines it sits just over the simple-skill threshold and offers no one-level-deep external references, leaving minor organization headroom.

4 / 5

Total

17

/

20

Passed

Description

87%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, explicit description that clearly states both what the skill does and when to use it, anchored on the distinctive 'Tailwind CSS' trigger. It loses a little on specificity and trigger-term breadth by relying on generic verbs and missing common synonyms like 'styling' or 'utility classes'.

DimensionReasoningScore

Specificity

The description names the domain ('designing/implementing UI with Tailwind CSS') and enumerates several concrete sub-capabilities ('layout, typography, responsive, theming, component patterns'), but the verbs ('designing/implementing') are relatively generic rather than a comprehensive set of distinct actions.

4 / 5

Completeness

It explicitly answers both 'what' (designing/implementing UI with Tailwind CSS across layout, typography, responsive, theming, component patterns; quick recipes and conventions) and 'when' ('Use when designing/implementing UI with Tailwind CSS...') with concrete trigger phrases, matching the top anchor.

5 / 5

Trigger Term Quality

It leads with 'Use when designing/implementing UI with Tailwind CSS' and surfaces natural terms users say ('Tailwind CSS', 'UI', 'responsive', 'theming'), but omits common synonyms like 'styling', 'CSS framework', or 'utility classes'.

4 / 5

Distinctiveness Conflict Risk

'Tailwind CSS' pins a clear niche with distinct triggers; the parenthetical sub-areas further disambiguate it from general CSS or frontend skills, giving minimal conflict risk.

5 / 5

Total

18

/

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