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.

71

Quality

87%

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

75%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 well-structured, appropriately concise skill body with concrete code patterns and a verification section. The main weaknesses are the dangling 'search-docs' reference with no corresponding bundle file, verification steps that lack concrete commands, and an internal inconsistency with the frontmatter (description advertises 'Tailwind v3/v4 work' while the body mandates 'Always use Tailwind CSS v3').

Suggestions

Resolve or remove the 'search-docs' reference: either ship a scripts/search-docs tool or a references/ file with Tailwind v3 patterns, or replace it with concrete inline guidance, since the bundle contains no such resource.

Reconcile the version guidance: the description invites 'Tailwind v3/v4 work' but the body mandates 'Always use Tailwind CSS v3' — state how v4 requests should be handled (or scope the description to v3 only).

Make the Verification section actionable: replace 'Check browser for visual rendering' and 'Test responsive breakpoints' with concrete steps (e.g., specific viewport widths to check or a defined check command), and trim the generic Flexbox/Grid examples that restate patterns Claude already knows.

DimensionReasoningScore

Conciseness

The body is mostly lean — terse directives like 'When listing items, use gap utilities for spacing; don't use margins' and short focused code blocks. However, the Flexbox Layout and Grid Layout examples ('flex items-center justify-between gap-4', 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3') demonstrate utility combinations Claude already knows well and could be trimmed to only the convention-bearing parts. This matches level 4 ('efficient; minor instances of over-explanation') rather than level 5, and is well above level 3 since there is no conceptual padding like explaining what Tailwind is.

4 / 5

Actionability

Mostly executable guidance: exact @tailwind directives, 'Configuration is done in the tailwind.config.js file', the dark: variant pattern, and copy-paste-ready HTML snippets for gap, dark mode, and responsive grids. The gap keeping it from level 5 is 'Use search-docs for detailed Tailwind CSS v3 patterns and documentation' — no scripts/, references/, or assets/ directories exist in the bundle, so this pointer is not resolvable — plus no concrete commands for the verification steps. It is clearly above level 3, which requires pseudocode or missing key details.

4 / 5

Workflow Clarity

The flow is coherent — check existing conventions, apply v3-supported classes, follow the gap/dark-mode rules, then verify via the 'Verification' checklist (check browser rendering, test responsive breakpoints, verify dark mode). This is a simple single-purpose skill with no destructive or batch operations, so no validation cap applies. It sits at level 4 rather than 5 because the verification steps are high-level directives ('Check browser for visual rendering') without concrete how-to, and the overall sequence is implied by section order rather than explicitly enumerated.

4 / 5

Progressive Disclosure

The body is well organized with clear section headers (Basic Usage, v3 Specifics, Spacing, Dark Mode, Common Patterns, Verification, Common Pitfalls) and all content is appropriately inline at this scale (~80 lines, no bulk reference material). No bundle files exist, so scoring follows the standalone structure. It does not reach level 5 because the one reference made ('search-docs') is not clearly resolved to a real file or tool in the bundle — a minor navigation gap consistent with the level-4 anchor ('references mostly clear; minor organization gaps').

4 / 5

Total

16

/

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.

This is an exemplary trigger-oriented skill description: it states a dominant keyword trigger, enumerates concrete task categories with natural phrasing, defines the core capability with template-engine specificity, and closes the boundary with an explicit skip list. It fully matches the rubric's good-overall examples in structure and density without padding.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions: 'building responsive grid layouts (multi-column card grids, product grids)', 'styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges)', 'adding dark mode variants', 'fixing spacing or typography', and the core capability 'writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue)'. Coverage is comprehensive across the domain's real tasks; it exceeds the level-4 anchor ('several specific actions; minor gaps') because every major task category is named, and is not below it since nothing concrete is missing.

5 / 5

Completeness

It explicitly answers 'when' with concrete triggers ('Always invoke when the user's message includes tailwind...', 'Also invoke for:...', 'Skip for...') and 'what' with 'The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue)'. This matches the level-5 anchor exactly: both what and when are explicit with concrete trigger phrases, and the addition of a skip list makes the 'when' even more precise than the anchor example.

5 / 5

Trigger Term Quality

Natural user phrases are comprehensively covered: 'tailwind', 'grid layouts', 'flex', 'dashboards with sidebars', 'dark mode', 'cards, tables, navbars, forms', 'spacing or typography', plus template-language synonyms 'Blade, JSX, Vue'. The instruction to invoke on "'tailwind' in any form" captures all morphological variations of the dominant trigger; the only absent category is file extensions, which do not meaningfully exist for this domain, so it does not fall to level 4.

5 / 5

Distinctiveness Conflict Risk

The niche is unambiguous (Tailwind utility-class work in HTML templates) and the 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') actively prevent overlap with adjacent skills. Clear distinct triggers with minimal conflict risk — the level-5 anchor.

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