tailwind-patterns

Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes.

Install with Tessl CLI

npx tessl i github:NeverSight/skills_feed --skill tailwind-patterns

What are skills?

Review — 95%

Does it follow best practices?

Validation — 11 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Evaluation results

76%

34%

Product Listing Page

Responsive card grid layout

Criteria

Without context

With context

Centered container

100%

Responsive grid classes

100%

Grid gap

100%

Card background and rounding

100%

Card shadow

100%

Card padding

Card title classes

100%

Card title margin

Card body text color

Responsive width breakpoints

100%

Spacing scale usage

100%

Tailwind CDN loaded

100%

Without context: $0.1850 · 45s · 10 turns · 15 in / 2,993 out tokens

With context: $0.3120 · 55s · 17 turns · 23 in / 3,620 out tokens

100%

18%

Contact Form with Dark Mode Support

Dark mode form with config

Criteria

Without context

With context

darkMode config value

100%

darkMode config syntax

100%

Dark bg on container

100%

Dark text on container

50%

100%

Input border class

100%

Input rounding

100%

Input focus ring

100%

Input focus border removal

100%

Input full width

100%

Button base color

100%

Button hover state

100%

Button transition

100%

Vertical stack layout

100%

Without context: $0.1663 · 42s · 12 turns · 19 in / 2,725 out tokens

With context: $0.4048 · 1m 10s · 25 turns · 361 in / 4,099 out tokens

93%

45%

Site Navigation Bar

Navbar with interactive states and arbitrary values

Criteria

Without context

With context

Calc arbitrary height

100%

Bracket notation used

100%

Flex row navbar

60%

100%

Navbar gap

group-hover sub-menu

100%

group class on parent

100%

hover: on nav links

100%

Button bg-blue-600

100%

Button text-white

100%

Button hover:bg-blue-700

100%

Button rounded-lg

100%

md: breakpoint used

100%

Without context: $0.2030 · 1m 9s · 12 turns · 19 in / 3,823 out tokens

With context: $0.3697 · 1m 17s · 22 turns · 271 in / 4,446 out tokens

Evaluated: about 13 hours ago
Agent: Claude Code

Table of Contents

Product Listing Page Contact Form with Dark Mode Support Site Navigation Bar

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.