tailwind-css-patterns

Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

Quality

77%

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-css-patterns/SKILL.md

The canonical home for this skill is giuseppe-trisciuoglio/developer-kit

Quality

Content

71%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 well-structured and actionable, with a clean reference architecture that confirms all bundle files exist. Its main weakness is conciseness: the Overview and When-to-Use sections restate the frontmatter and contain light marketing fluff that could be trimmed.

Suggestions

Remove the redundant Overview and 'When to Use' sections (or collapse them) since they restate the frontmatter description and triggers; eliminate 'enhanced developer experience'-style fluff.

Make the partial code snippets fully copy-paste ready (e.g., the 'Common Patterns' card and grid blocks) to push actionability to 5.

Add an explicit feedback loop to the Verify step (e.g., 'if a regression appears, isolate the breakpoint and re-test') to strengthen workflow clarity.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient (tables, code blocks, lists), but the Overview and 'When to Use' sections duplicate the frontmatter description and triggers, and phrases like 'enhanced developer experience' are padding. It could be tightened, matching the 3 anchor of 'mostly efficient but includes some unnecessary explanation.'	3 / 5
Actionability	Provides concrete executable guidance: a breakpoints table with pixel values, runnable code (responsive grid, ProductCard tsx, form input), and specific troubleshooting commands ('npx tailwindcss -o --watch', "document.documentElement.classList.toggle('dark')"). Some examples are partial snippets rather than complete copy-paste blocks, keeping it at 4.	4 / 5
Workflow Clarity	The six-step Instructions are clearly sequenced and end with an explicit 'Verify Changes' checkpoint ('Test at each breakpoint using DevTools ... Check for visual regressions and accessibility issues before committing'). This is not a destructive or batch operation, so the cap does not apply; minor validation gaps keep it at 4 rather than 5.	4 / 5
Progressive Disclosure	SKILL.md is an overview with eight well-signaled one-level-deep references (layout-patterns, component-patterns, responsive-design, animations, performance, accessibility, configuration, reference), each given a descriptive label, and all referenced files verified to exist. Content is appropriately split with easy navigation, matching the 5 anchor.	5 / 5
	Total	16 / 20 Passed

Description

83%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 is strong: it explicitly covers both what the skill provides and when to use it, with a concrete enumeration of Tailwind capability areas and natural trigger phrases. It falls just short of top marks on specificity and trigger coverage due to a generic lead verb and a few missing natural synonyms.

Suggestions

Replace the generic verb 'Provides ... patterns' with concrete action verbs (e.g., 'Compose utility classes, build responsive grids, implement dark mode') to lift specificity toward 5.

Add high-frequency natural trigger terms users actually say — 'dark mode', 'utility classes', 'responsive design' — to broaden trigger-term coverage.

Tighten the 'when' clause to Tailwind-specific contexts to reduce overlap risk with generic CSS or design-system skills.

Dimension	Reasoning	Score
Specificity	Enumerates concrete pattern categories — 'responsive design, layout utilities, flexbox, grid, spacing, typography, colors' — giving comprehensive coverage with only minor gaps (e.g., dark mode is absent from the description). The lead verb 'Provides ... patterns' is generic compared to the concrete action verbs in the 5 anchor, so it sits at 4 rather than 5.	4 / 5
Completeness	Clearly answers both: 'what' ('Provides comprehensive Tailwind CSS utility-first styling patterns including ...') and 'when' ('Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.') with concrete trigger phrases, matching the 5 anchor.	5 / 5
Trigger Term Quality	Includes natural phrases a user would say — 'styling React/Vue/Svelte components', 'responsive layouts', 'design systems', 'CSS workflow', 'Tailwind CSS' — giving good keyword coverage. A few common natural terms are missing (e.g., 'dark mode', 'utility classes'), so it does not reach comprehensive 5-anchor coverage.	4 / 5
Distinctiveness Conflict Risk	'Tailwind CSS' carves a clear niche, but broad triggers like 'implementing design systems' and 'optimizing CSS workflow' create minor overlap risk with general CSS or design-system skills, placing it at 4 rather than a conflict-free 5.	4 / 5
	Total	17 / 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
allowed_tools_field	'allowed-tools' contains unusual tool name(s)	Warning

	Total	15 / 16 Passed

Repository: modelscope/ms-agent
Path: .agents/skills/tailwind-css-patterns/SKILL.md
Commit: a56afcc

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