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.

1.00x

Quality

95%

Does it follow best practices?

Impact

100%

1.00x

Average score across 1 eval scenario

Securityby

Passed

No findings from the security scan

Quality

Content

90%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 tight, highly actionable Tailwind v4 reference with executable examples and a useful deprecated-utilities table. It is slightly weaker on workflow sequencing and progressive disclosure, since it offers no ordered apply-then-verify workflow and keeps all material inline rather than splitting detail into reference files.

Suggestions

Add a brief ordered workflow (1. Check existing project conventions 2. Apply v4 CSS-first/@import syntax 3. Add dark: variants 4. Scan for deprecated utilities) so the conventions are applied in a consistent, verifiable sequence.

Move the replaced-utilities table or v4 specifics into a reference file (e.g., references/v4-migration.md) and link to it from SKILL.md to improve progressive disclosure as the skill grows beyond ~95 lines.

Append a validation/pitfalls checkpoint prompting Claude to confirm no deprecated utilities, @tailwind directives, or tailwind.config.js remain after edits.

Dimension	Reasoning	Score
Conciseness	Lean reference that assumes Claude's competence: no padding about what Tailwind or CSS is, just dense code blocks, a deprecated-utilities table, and brief convention notes; nearly every token earns its place.	5 / 5
Actionability	Fully executable, copy-paste-ready examples throughout — a real @theme block, @import "tailwindcss", specific gap-8 and dark: class strings, and a precise deprecated->replacement table covering the common v4 migration cases.	5 / 5
Workflow Clarity	Conventions and a Common Pitfalls checklist give clear guidance, but there is no explicit ordered workflow (e.g., check conventions -> apply v4 syntax -> add dark: variants -> scan for deprecated utilities) and only an implicit 'follow existing conventions before introducing new patterns' sequencing.	4 / 5
Progressive Disclosure	Well-organized sections with a clearly signaled one-level-deep reference (search-docs) for deeper patterns, but at ~95 lines the content is entirely inline with no reference-file split, keeping it just below the 'content appropriately split' anchor.	4 / 5
	Total	18 / 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.

The description is exemplary: it clearly states what the skill does, when to invoke it via concrete natural triggers, and when to skip it via explicit exclusions. Both inclusion and exclusion guidance make it highly distinct and low-conflict.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions (responsive grid layouts, flex/grid page structures, styling cards/tables/navbars/forms, dark mode variants, fixing spacing/typography, writing/fixing Tailwind utility classes in Blade/JSX/Vue) plus explicit exclusion criteria, giving comprehensive coverage.	5 / 5
Completeness	Explicitly answers 'what' ('writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue)') and 'when' ('Always invoke when the user's message includes tailwind in any form. Also invoke for...') with concrete trigger phrases and explicit 'Skip for...' exclusions.	5 / 5
Trigger Term Quality	Includes the natural catch-all trigger 'tailwind' in any form plus abundant natural synonyms users say (responsive grid, card grid, dashboard sidebar, navbar, dark mode, spacing, typography) and named template frameworks (Blade, JSX, Vue) that serve the extension-like signal.	5 / 5
Distinctiveness Conflict Risk	Clear Tailwind-specific niche with a distinct trigger ('tailwind') and active conflict reduction via 'Skip for backend PHP logic... vanilla CSS, CSS file audits, build tool configuration', minimizing overlap with general CSS/frontend skills.	5 / 5
	Total	20 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: laravel/boost
Path: .ai/tailwindcss/4/skill/tailwindcss-development/SKILL.md
Commit: 5b33d49

Reviewed: 2 days ago

Table of Contents

Discovery Implementation Validation

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.