CtrlK
BlogDocsLog inGet started
Tessl Logo

tailwindcss-development

Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3/v4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS.

68

Quality

84%

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.

A solid, well-structured reference skill: concrete v4 migration examples, a useful deprecated-utilities table, and clear pattern snippets. Its main weaknesses are a generic Basic Usage section, an underspecified search-docs pointer, and the absence of any validation-style workflow — acceptable for a styling skill but worth tightening.

Suggestions

Tighten the 'Basic Usage' bullets by dropping generic class-management advice Claude already knows; keep only project-specific conventions worth enforcing.

Make the 'search-docs' reference concrete — specify the query terms or the exact documentation file/path to consult, so Claude knows what to look up.

Add a short verification step tying the 'Common Pitfalls' list into the workflow (e.g., 'After writing classes, confirm none appear in the deprecated table and that dark mode variants match existing pages').

DimensionReasoningScore

Conciseness

Mostly lean with tight code blocks and a compact replaced-utilities table that earn their tokens, but the 'Basic Usage' bullets include generic guidance Claude already knows ('Consider class placement, order, priority, and defaults. Remove redundant classes ...') — minor over-explanation that could be trimmed. Fits the score-4 anchor (efficient with minor trimmable instances) rather than 5, and is tighter than the score-3 'mostly efficient but some unnecessary explanation' anchor.

4 / 5

Actionability

Provides copy-paste-ready examples for the common cases — @theme config, @import diff, gap utilities, dark mode variant, flexbox and grid layouts — plus a complete deprecated→replacement table. Minor gaps keep it at 4 rather than 5: the 'Use search-docs for detailed ... patterns' pointer is unspecific (no concrete query or file), and the Basic Usage section is guidance-heavy without executable steps.

4 / 5

Workflow Clarity

This is a patterns/reference skill rather than a sequenced multi-step process, so no explicit workflow or validation checkpoints are given; the 'Common Pitfalls' list acts only as a soft checklist, not a validate→fix→retry loop. Matches the score-3 anchor (guidance present but checkpoints implicit/missing); not a 4 because there is no real sequenced workflow, and not capped lower because styling HTML is not a destructive/batch operation requiring a validation cap.

3 / 5

Progressive Disclosure

Well-organized into clearly headed sections (Documentation, Basic Usage, v4 Specifics, Spacing, Dark Mode, Common Patterns, Common Pitfalls) with a one-level-deep pointer to 'search-docs' for detail. It is a 4 rather than 5 because the search-docs reference is loosely signaled (not a concrete file link) and all content is inlined with no split between overview and detailed materials; the skill is over 50 lines so the simple-skill 5 exception does not apply.

4 / 5

Total

15

/

20

Passed

Description

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

An exceptionally strong description: concrete actions, a primary natural trigger, explicit what/when guidance, and a skip clause that bounds conflict risk. It is somewhat long, but every clause is concrete and load-bearing rather than padded fluff.

DimensionReasoningScore

Specificity

Lists multiple concrete actions with comprehensive coverage — 'building responsive grid layouts', 'styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges)', 'adding dark mode variants', 'fixing spacing or typography', and 'writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue)'. Each action is concrete rather than abstract, matching the score-5 anchor; the imperative 'Always invoke' framing is analogous to the accepted 'Use when...' form rather than first/second-person voice, so no specificity penalty applies.

5 / 5

Completeness

Explicitly answers both what ('writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue)' plus the enumerated styling tasks) and when ('Always invoke when the user's message includes tailwind in any form. Also invoke for: ...'), with a concrete 'Skip for ...' negative boundary. This is the score-5 anchor pattern of explicit what-and-when with concrete triggers.

5 / 5

Trigger Term Quality

Comprehensive natural-term coverage including the primary trigger 'tailwind in any form' plus synonyms and task phrasings users actually say: 'responsive grid layouts', 'multi-column card grids', 'dashboards with sidebars', 'dark mode variants', 'spacing', 'typography', and template formats 'Blade, JSX, Vue'. This matches the score-5 anchor's expectation of synonyms and common variations.

5 / 5

Distinctiveness Conflict Risk

Clear niche (Tailwind CSS development) with distinct triggers, and the explicit 'Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS' clause sharply reduces overlap risk. Matches the score-5 anchor of a clear niche with minimal conflict risk.

5 / 5

Total

20

/

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

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
yaojingang/GEOFlow
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.