tailwind-patterns

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

Quality

44%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/tailwind-patterns/SKILL.md

Quality

Content

52%Scale 1-5

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

This skill provides a broad Tailwind v4 reference but suffers from including too much general Tailwind knowledge that Claude already knows (breakpoints, flexbox, animations, typography) alongside the genuinely valuable v4-specific content (CSS-first config, @theme directive, Oxide engine, container queries). The table-heavy format is scannable but sacrifices actionability—most sections lack executable code examples. The content would benefit from being trimmed to focus on v4 differences and split into focused reference files.

Suggestions

Remove or drastically reduce sections 4, 6, 8, and 9 (breakpoints, layout patterns, typography, animations) as these are standard Tailwind knowledge Claude already knows—focus the skill on what's new/different in v4.

Add concrete, executable code examples for container queries, dark mode implementation, and component extraction showing actual HTML with Tailwind classes rather than just table descriptions of class names.

Split the content into focused files: keep SKILL.md as a concise v4 overview with migration guidance, and reference separate files like CONTAINER-QUERIES.md, COLOR-TOKENS.md, and MIGRATION.md for detailed content.

Add a concrete migration workflow with steps for converting a v3 project to v4 CSS-first configuration, including validation steps to verify the migration worked correctly.

Dimension	Reasoning	Score
Conciseness	The skill is mostly efficient with table-based formatting, but includes several sections that explain concepts Claude already knows well (breakpoint system, flexbox patterns, basic animation classes, typography scale). Sections 4, 6, 8, and 9 are largely standard Tailwind knowledge that doesn't need restating. The v4-specific content (sections 1-3) is where the real value lies.	3 / 5
Actionability	The skill provides one concrete code example (the @theme block) but most guidance is in table format describing what to use rather than showing executable examples. Container queries, dark mode, and component extraction lack concrete code snippets showing actual implementation. The tables describe patterns at a high level but don't provide copy-paste ready HTML/CSS.	3 / 5
Workflow Clarity	For a reference/principles skill rather than a multi-step process skill, the content is well-organized with clear decision tables (when to use container queries vs breakpoints, when to extract components, extend vs override). There are no destructive operations requiring validation steps. The migration guidance (v3 vs v4 table) provides clear direction, though a migration workflow with steps would strengthen it.	4 / 5
Progressive Disclosure	The skill is a monolithic 200+ line document with no references to external files. Sections like layout patterns, typography, animations, and color systems could be split into separate reference files. With no bundle files provided and no external references, all content is inlined regardless of whether it's core v4-specific knowledge or general Tailwind reference material.	2 / 5
	Total	12 / 20 Passed

Description

36%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 identifies the domain (Tailwind CSS v4) and lists relevant concept areas but reads more like a tag cloud than a functional skill description. It lacks concrete actions (no verbs), has no 'Use when...' clause, and uses noun phrases that describe topics rather than capabilities. The specificity to v4 is a strength but is undermined by the lack of actionable detail.

Suggestions

Add concrete action verbs describing what the skill does, e.g., 'Guides migration from Tailwind v3 to v4, implements CSS-first configuration, sets up design token architecture'

Add an explicit 'Use when...' clause with trigger phrases, e.g., 'Use when the user asks about Tailwind CSS v4, migrating to Tailwind v4, container queries in Tailwind, or CSS-first configuration'

Include natural keyword variations users might say, such as 'tailwindcss', 'utility classes', 'styling components', '@theme', or 'tailwind.config'

Dimension	Reasoning	Score
Specificity	Names the domain (Tailwind CSS v4) and lists topic areas (CSS-first configuration, container queries, design token architecture) but these are concepts/topics rather than concrete actions. No verbs describing what the skill actually does.	2 / 5
Completeness	Has a weak 'what' (principles and concepts listed as noun phrases) but completely lacks a 'when' clause. There is no explicit trigger guidance for when Claude should select this skill. Per rubric guidelines, missing 'Use when...' caps completeness at 3, and the 'what' is also vague, so this scores a 2.	2 / 5
Trigger Term Quality	Includes relevant keywords like 'Tailwind CSS v4', 'container queries', 'design tokens' that users might mention, but misses common variations like 'tailwindcss', 'utility classes', 'responsive design', 'styling', or file extensions like '.css'. Also missing natural phrases users would say.	3 / 5
Distinctiveness Conflict Risk	Specifying 'Tailwind CSS v4' provides some distinctiveness, but 'modern patterns' and 'design token architecture' are broad enough to overlap with general CSS skills or design system skills. The v4-specific mention helps but doesn't fully prevent conflict with general Tailwind or CSS skills.	3 / 5
	Total	10 / 20 Passed

Validation

90%

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 — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: skills/tailwind-patterns/SKILL.md
Commit: debb2ec

Reviewed: 19 hours 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.