tailwind-patterns

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

Quality

58%

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 ./.agents/skills/tailwind-patterns/SKILL.md

Quality

Content

61%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.

The body is a dense, well-organized, table-driven reference with strong actionable class patterns and solid v4-specific content, but it mixes in basic Tailwind knowledge Claude already has and offers only light process sequencing, with a monolithic single-file structure that could split some reference material out.

Suggestions

Trim or compress the sections covering basic knowledge Claude already has (breakpoint widths, type scale, built-in animation classes) to lift conciseness, or move them to a short reference appendix.

Add one or two complete inline component examples (e.g., a card using @container with dark: variants) so the class patterns are shown assembled in real markup, pushing actionability toward 5.

Consider extracting the token/type-scale/breakpoint reference tables into a single reference file linked from the overview, which would tighten the main body and improve progressive disclosure.

Dimension	Reasoning	Score
Conciseness	The body is token-dense (almost entirely tables, no padded prose) and includes valuable v4-specific material (the @theme block, v3→v4 migration, container-query syntax), but several sections restate basics Claude already knows — the breakpoint widths (Section 4), type scale (Section 8), and animate-spin/pulse/bounce classes (Section 9) — fitting 'mostly efficient but includes some unnecessary explanation'.	3 / 5
Actionability	Concrete copy-pasteable guidance dominates: pattern→class mappings like 'flex items-center justify-center' and 'grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]', plus an executable @theme CSS block; the gap is that no full HTML/component examples show the classes combined in real markup, fitting 'mostly executable guidance; concrete code with minor gaps' rather than the fully-complete 5.	4 / 5
Workflow Clarity	This is a patterns reference rather than a multi-step workflow, so only light sequencing exists (the 3-step mobile-first list and Section 10 extraction signals); there is no coherent end-to-end workflow with checkpoints, matching 'steps listed but checkpoints missing or implicit' — no destructive/batch operations are present so the validation cap does not apply.	3 / 5
Progressive Disclosure	The file is well-structured with 12 clearly numbered, headed sections and navigable tables, with no nested references; because it is a ~260-line monolithic file (over the 50-line simple-skill threshold) with some reference material (token catalog, type scale, breakpoints) that could live in separate files, it fits 'good structure; most content appropriately placed; minor organization gaps' rather than the split-and-referenced 5.	4 / 5
	Total	14 / 20 Passed

Description

56%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 clearly identifies a specific niche (Tailwind v4) and lists concrete sub-topics with good natural keywords, but it is written as a topic catalog with no action verbs and no explicit 'Use when' trigger clause, leaving it without clear activation guidance and capping completeness at 3.

Suggestions

Rewrite as concrete actions in third person (e.g., 'Applies Tailwind CSS v4 patterns... Configures design tokens via @theme, implements container queries...') instead of noun-phrase topics.

Add an explicit 'Use when...' clause to the description (e.g., 'Use when implementing Tailwind v4 styling, design tokens, or container-query-based responsive layouts') so completeness is not capped at 3.

Replace the generic 'modern patterns' with a more distinctive phrase to reduce overlap with general CSS/design-system skills.

Dimension	Reasoning	Score
Specificity	The description ('Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.') names a specific domain and concrete sub-topics, but contains no action verbs — it is a topical catalog ('principles', 'architecture') rather than a list of concrete actions, matching the 'names the domain but actions are minimal' anchor.	2 / 5
Completeness	A clear 'what' is present (v4 principles: CSS-first config, container queries, design tokens), but the description field itself lacks any 'Use when...' clause; per the rubric a missing trigger clause caps completeness at 3, matching the 'clear what but when missing' anchor.	3 / 5
Trigger Term Quality	Natural developer-facing terms appear — 'Tailwind CSS v4', 'container queries', 'design token architecture' — which users would actually say; a few common synonyms ('utility classes', 'responsive', 'styling') are missing, fitting 'good keyword coverage; a few natural terms missing' rather than the comprehensive 5.	4 / 5
Distinctiveness Conflict Risk	'Tailwind CSS v4' with 'CSS-first configuration' and 'container queries' pins a clear niche with low conflict risk, but the broad phrases 'modern patterns' and 'design token architecture' could overlap with general design-system skills, fitting 'mostly distinct; minor overlap risk' rather than the minimal-risk 5.	4 / 5
	Total	13 / 20 Passed

Validation

87%

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 — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
allowed_tools_field	'allowed-tools' contains unusual tool name(s)	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	14 / 16 Passed

Repository: vudovn/ag-kit
Path: .agents/skills/tailwind-patterns/SKILL.md
Commit: 211561c

Reviewed: 8 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.