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.

91

1.00x
Quality

88%

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

77%

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

This is a solid, actionable Tailwind CSS v4 skill with good concrete examples and a useful deprecation reference table. Its main weakness is minor verbosity—some guidance restates what Claude already knows, and the common pitfalls section is largely redundant with earlier content. The structure is reasonable for a single-file skill but could benefit from slightly tighter editing.

Suggestions

Remove the 'Common Pitfalls' section since it merely restates information already covered in the body, or condense it to a single-line reminder.

Trim generic advice Claude already knows (e.g., 'group elements logically', 'Remove redundant classes') to save tokens for more Tailwind-specific guidance.

DimensionReasoningScore

Conciseness

Generally efficient but includes some unnecessary guidance Claude already knows (e.g., 'Check and follow existing Tailwind conventions,' 'group elements logically'). The HTML comments like `<!-- CSS-First Config -->` add no value. The common pitfalls section largely restates what was already covered above.

2 / 3

Actionability

Provides concrete, executable code examples for all key patterns (CSS-first config, import syntax, flexbox, grid, dark mode). The deprecated-to-replacement utility table is immediately actionable and copy-paste ready.

3 / 3

Workflow Clarity

This is primarily a reference/styling skill rather than a multi-step destructive workflow, so explicit validation checkpoints aren't critical. The guidance is clearly sequenced: check project conventions → use v4 patterns → apply correct utilities → handle dark mode. The single-task nature makes the workflow unambiguous.

3 / 3

Progressive Disclosure

References `search-docs` for detailed documentation which is good, but all content is inline in a single file. The replaced utilities table and common patterns could potentially be split out, though the file isn't excessively long. No bundle files are provided to support further disclosure, and the reference to `search-docs` is the only navigation point.

2 / 3

Total

10

/

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.

This is an excellent skill description that covers all key dimensions thoroughly. It provides specific concrete actions, rich natural trigger terms, explicit invocation and skip conditions, and a clearly defined niche that minimizes conflict with other skills. The description is well-structured and avoids vague language while remaining concise.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions: building responsive grid layouts, flex/grid page structures, styling UI components (with examples like cards, tables, navbars), adding dark mode variants, fixing spacing/typography, and writing/fixing Tailwind utility classes. Also explicitly lists what to skip.

3 / 3

Completeness

Clearly answers both 'what' (writing/fixing Tailwind utility classes in HTML templates, styling UI components, building layouts) and 'when' (explicit invocation trigger on 'tailwind' keyword, plus detailed scenario-based triggers). Also includes explicit 'skip' guidance which strengthens the 'when' dimension.

3 / 3

Trigger Term Quality

Excellent coverage of natural terms users would say: 'tailwind', 'responsive grid layouts', 'card grids', 'dashboards with sidebars', 'dark mode', 'spacing', 'typography', 'Blade', 'JSX', 'Vue', 'Tailwind v3/v4', plus specific component names like 'navbars', 'pricing sections', 'badges', 'forms'.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive with clear niche around Tailwind CSS utility classes. The explicit skip list (backend PHP, database queries, API routes, vanilla CSS, build tools) actively prevents conflicts with other skills, and the primary trigger on the word 'tailwind' is unambiguous.

3 / 3

Total

12

/

12

Passed

Validation

90%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

10

/

11

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.