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.

87

1.00x
Quality

Does it follow best practices?

Impact

97%

1.00x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

65%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is actionable and rich in concrete v4-specific examples and a useful deprecation table, but it spends tokens on basic patterns Claude already knows and keeps all content inline with no progressive file split. There is no validation checkpoint, though the skill involves no destructive operations.

Suggestions

Trim the Common Patterns (Flexbox/Grid) section or move it to a reference file, since trivial utility patterns like `flex items-center justify-between` are already known to Claude.

Add a brief verification step (e.g., 'check the rendered layout against existing dark-mode and responsive conventions before finalizing') to give the workflow an explicit checkpoint.

Split the v4 Replaced Utilities table and pitfalls into a one-level-deep reference file (e.g. references/v4-migration.md) and link to it from SKILL.md to improve progressive disclosure.

DimensionReasoningScore

Conciseness

Mostly efficient with no concept explanations, but includes trivial patterns Claude already knows (e.g. "flex items-center justify-between", "grid grid-cols-1 md:grid-cols-2") and abstract advice ("Consider class placement, order, priority, and defaults") that could be tightened.

2 / 3

Actionability

Provides complete, executable examples (the `@theme` block, the `@import "tailwindcss"` diff, gap-utility HTML, dark-mode markup) plus a concrete deprecated→replacement utility table that is copy-paste ready.

3 / 3

Workflow Clarity

Basic Usage gives loose guidance but there is no sequenced workflow with validation checkpoints; for a styling-convention reference this is acceptable, yet no explicit verification step is given before applying changes.

2 / 3

Progressive Disclosure

Sections are well-organized, but with no bundle files present all reference material (deprecation table, patterns, pitfalls) lives inline in SKILL.md rather than being split into one-level-deep referenced files; only the external `search-docs` tool is signaled.

2 / 3

Total

9

/

12

Passed

Description

100%

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, specific description with explicit invocation triggers, concrete capability listing, and a clear exclusion list that bounds the skill's niche. It answers both what and when without relying on vague fluff.

DimensionReasoningScore

Specificity

Lists multiple concrete actions such as "building responsive grid layouts", "styling UI components (cards, tables, navbars...)", "adding dark mode variants", and "writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue)".

3 / 3

Completeness

Explicitly answers what (styling HTML/components with Tailwind utility classes, layouts, dark mode) and when ("Always invoke when...", "Also invoke for:") with an equivalent "Use when" trigger clause, so it is not capped at 2.

3 / 3

Trigger Term Quality

The natural keyword "tailwind" is foregrounded ("Always invoke when the user's message includes 'tailwind' in any form") alongside user-facing terms like "dark mode", "responsive grid layouts", and "cards, tables, navbars".

3 / 3

Distinctiveness Conflict Risk

Clear Tailwind-in-HTML-templates niche reinforced by an explicit exclusion list ("Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS"), making wrong-skill conflicts unlikely.

3 / 3

Total

12

/

12

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