CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

90

0.98x
Quality

97%

Does it follow best practices?

Impact

98%

0.98x

2 of 3 eval scenarios. Add 1 more for a full score.

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

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

An efficient, highly actionable conventions document: exact v4 syntax, a complete migration table, and a pitfalls checklist, with no wasted tokens. The only weakness is the dangling `search-docs` pointer, which references documentation access that cannot be verified against any bundled file.

Suggestions

Clarify what `search-docs` refers to — if it is a bundled script, add it under scripts/ so the reference is verifiable; if it is an external tool or command, state that explicitly (e.g., 'the search-docs MCP tool').

Consider moving the full deprecated-utility replacement table to a reference file (e.g., references/v4-migration.md) and keeping only the most common replacements inline, so SKILL.md stays a lean overview.

Add a short ordered checklist for styling requests (check project conventions → apply v4 syntax → verify against the pitfalls list) to make the workflow sequence explicit rather than implied.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence: no concept explanations, and every section carries non-obvious knowledge such as "`corePlugins` is not supported in Tailwind v4" and the deprecated-to-replacement table. The gap and dark-mode snippets are 2-4 lines and normative rather than instructional, so every token earns its place.

5 / 5

Actionability

Guidance is fully executable and copy-paste ready: the exact "@import \"tailwindcss\"" diff, a complete deprecated-utility replacement table, and the explicit opacity rule "bg-blue-500 bg-opacity-50 becomes bg-blue-500/50". It covers the common v3-to-v4 cases with no gaps in core guidance.

5 / 5

Workflow Clarity

A single-purpose styling skill with unambiguous directives, a stated first step ("Before introducing new patterns, check and follow the project's existing Tailwind conventions"), and a closing "Common pitfalls" checklist. No destructive or batch operations exist, so no validation cap applies and the simple-skill exception holds.

5 / 5

Progressive Disclosure

The single file is well organized with clear sections, but its only external pointer — "Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation" — is backed by nothing in the bundle (no references/, scripts/, or assets/ exist), so navigation to deeper detail is unverifiable. This fits anchor 4 (mostly clear placement, minor organization gap) rather than 5 (verifiable one-level-deep references).

4 / 5

Total

19

/

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 exemplary description: it states concrete capabilities, gives explicit 'always invoke when' triggers with a rich set of natural terms, defines the core use case, and delimits scope with a skip list. All four dimensions sit at the top anchor.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "building responsive grid layouts (multi-column card grids, product grids)", "adding dark mode variants", "fixing spacing or typography", and "writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue)" — with comprehensive coverage. It is not 4 because there are no minor gaps in the enumerated actions.

5 / 5

Completeness

Both what ("writing or fixing Tailwind utility classes in HTML templates") and when ("Always invoke when the user's message includes 'tailwind' in any form. Also invoke for:...") are explicitly stated with concrete trigger phrases, plus skip guidance. Matches the anchor-5 example, not 4, since the when-clause is fully explicit.

5 / 5

Trigger Term Quality

It includes the natural trigger "tailwind" plus phrases users actually say: "dark mode variants", "dashboards with sidebars", "pricing sections", "forms, inputs, badges", "Blade, JSX, Vue", and "Tailwind v3/v4". Not 4, because synonym and ecosystem-term coverage is thorough rather than missing a few natural terms.

5 / 5

Distinctiveness Conflict Risk

A clear Tailwind CSS niche with explicit exclusions — "Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS" — that prevent triggering for the wrong skill.

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository

laravel/boost

Path

.ai/tailwindcss/4/skill/tailwindcss-development/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.