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

88%

Does it follow best practices?

Impact

97%

1.00x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

93%

Upgrade Tailwind CSS Setup to v4

Tailwind v3 to v4 migration

Criteria

Without context

With context

CSS @import syntax

100%

No @tailwind directives

100%

@theme for custom colours

100%

Custom font in @theme

100%

No tailwind.config.js corePlugins

100%

No deprecated opacity utilities

100%

Opacity replaced correctly

100%

No deprecated flex-grow/shrink classes

100%

flex-grow replaced correctly

100%

Gap over margin spacing

100%

Add a Testimonials Section to the Marketing Site

Dark mode and gap utilities in new component

Criteria

Without context

With context

Dark mode on card bg

100%

Dark mode on text

100%

Dark mode on section

100%

Gap for sibling spacing

100%

No margin-based sibling spacing

100%

Responsive grid

100%

No deprecated opacity classes

100%

No deprecated flex utilities

100%

Consistent border/rounded style

100%

Dark mode border

100%

Build a Product Catalogue Page

Fresh Tailwind v4 setup with custom theme

Criteria

Without context

With context

v4 @import syntax

100%

No @tailwind directives

100%

@theme for brand colour

100%

No tailwind.config.js

100%

Responsive grid breakpoints

100%

Gap for grid spacing

100%

Dark mode background

100%

Dark mode text

100%

No deprecated opacity utilities

100%

No deprecated flex utilities

100%

Brand colour applied to CTA

100%

Repository: laravel/boost
Commit: 9c28875

Evaluated: 8 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Upgrade Tailwind CSS Setup to v4 Add a Testimonials Section to the Marketing Site Build a Product Catalogue Page

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.