Name: tailwind-patterns
Rating: 57.599999999999994 (1 reviews)
Author: administrakt0r

Blog Docs Log in Get started

tailwind-patterns

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

Quality

66%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/tailwind-patterns/SKILL.md

The canonical home for this skill is tailwind-patterns in administrakt0r/AI-Agents-Safe-Coding-Skills

Quality

Content

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

A well-structured, actionable Tailwind v4 pattern reference built mostly from dense, copy-paste-ready tables. It is token-efficient and well-organized, though it is a topical catalog rather than a sequenced workflow and contains a few sections restating concepts Claude already knows.

Suggestions

Trim or remove sections that restate basics Claude already knows (Mobile-First Principle steps, OKLCH-vs-HSL advantage table) to push conciseness toward 5.

Add a short decision flow or 'choosing the right pattern' sequence (e.g., layout → responsive → dark mode → extract component) so the catalog reads as a guided workflow rather than parallel tables.

Consider moving the color-system and typography sections into reference files and linking them one level deep to improve progressive disclosure and reduce inline bulk.

Dimension	Reasoning	Score
Conciseness	The body is predominantly dense reference tables mapping patterns to copy-paste classes, which is token-efficient; only minor sections restate concepts Claude already knows (the Mobile-First Principle steps and the OKLCH-vs-HSL advantage table), fitting the efficient-with-minor-over-explanation anchor rather than the lean-5 anchor.	4 / 5
Actionability	It provides concrete, copy-paste-ready guidance throughout — a full executable @theme block and exact class combinations like `flex items-center justify-center` and `grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]` — but patterns are class strings without full HTML/component context, leaving minor gaps versus the fully-executable-5 anchor.	4 / 5
Workflow Clarity	This is a topical pattern catalog rather than a sequenced multi-step workflow; the embedded 'When to Use' decision tables give some guidance but there is no explicit process sequence or decision flow, so it sits at the steps-present-but-no-real-workflow level.	3 / 5
Progressive Disclosure	The body is well-organized into 12 clearly-headed numbered sections with a focused 'When to Use' opener and no nesting of references; no bundle files exist to verify, and as a cohesive single-file quick-reference the inline placement is appropriate with only minor gaps where sections (e.g., color system, typography) could arguably be split out.	4 / 5
	Total	15 / 20 Passed

Description

65%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 names a clear, distinct niche and several concrete topic areas, but it omits any explicit "Use when" trigger guidance and frames capabilities as noun phrases rather than actions. Adding a when-to-use clause and verb-based actions would lift the lower dimensions.

Suggestions

Add an explicit 'Use when...' clause naming the situations a user would describe (e.g., 'Use when configuring Tailwind v4, building CSS-first themes, or using container queries').

Reframe topics as concrete verb-based actions ('Configure CSS-first themes via @theme', 'Implement container queries') to raise specificity above 3.

Include more natural trigger synonyms users say ('utilities', 'responsive layout', 'dark mode') to round out trigger-term coverage.

Dimension	Reasoning	Score
Specificity	Names the domain ("Tailwind CSS v4") plus several concrete topics ("CSS-first configuration", "container queries", "design token architecture"), but these are noun-phrase capabilities rather than the concrete verb-based actions the higher anchors require, so it sits at the domain-plus-topics level rather than comprehensive action coverage.	3 / 5
Completeness	It clearly states what the skill covers but has no "Use when..." clause or equivalent explicit trigger guidance; per the rubric, a missing explicit when-clause caps completeness at 3 even though the what is clear.	3 / 5
Trigger Term Quality	Strong natural triggers ("Tailwind CSS v4", "container queries", "design token") that users would genuinely say, with only a few common synonyms missing (e.g., "utilities", "responsive", "dark mode"), matching the good-but-not-exhaustive anchor.	4 / 5
Distinctiveness Conflict Risk	"Tailwind CSS v4" is a tightly scoped niche with version specificity, making it clearly distinguishable from other skills with minimal overlap risk.	5 / 5
	Total	15 / 20 Passed

Validation

93%

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

Validation for skill structure

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

	Total	15 / 16 Passed

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

Reviewed: 1 day 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.