tailwind-patterns

tessl i github:jezweb/claude-skills --skill tailwind-patterns

Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts.

96%

Overall

Validation — 81%

Implementation — 100%

Activation — 92%

SKILL.md

Review

Evals

Validation

81%

Warnings & errors only

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (509 lines); consider splitting into references/ and linking	Warning
metadata_version	'metadata' field is not a dictionary	Warning
license_field	'license' field is missing	Warning

	Total	13 / 16 Passed

Implementation

100%

This is an exemplary skill file that provides production-ready Tailwind CSS patterns with exceptional organization and actionability. The content is lean, every code example is executable, and the progressive disclosure through references to detailed documentation is well-implemented. The Critical Rules section adds valuable guardrails without being verbose.

Dimension	Reasoning	Score
Conciseness	The skill is highly efficient with no unnecessary explanations of what Tailwind is or how CSS works. Every section provides direct, actionable patterns without padding or concepts Claude already knows.	3 / 3
Actionability	All patterns include complete, copy-paste ready TSX code examples. The code is executable with real class names, proper structure, and practical variations for different use cases.	3 / 3
Workflow Clarity	For a reference/pattern skill, the workflow is clear: Quick Start provides essential patterns, then organized sections cover specific components. The Critical Rules section provides clear do/don't guidance. No multi-step destructive operations require validation checkpoints.	3 / 3
Progressive Disclosure	Excellent structure with Quick Start overview, organized sections for each component type, and clear one-level-deep references to detailed documentation in `references/` directory and `templates/components/`. Navigation is well-signaled throughout.	3 / 3
	Total	12 / 12 Passed

Activation

92%

This is a strong skill description that clearly articulates specific capabilities and includes an explicit 'Use when' clause with natural trigger terms. The main weakness is potential overlap with other frontend/CSS-related skills, though the Tailwind CSS focus provides reasonable differentiation.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions and components: 'responsive layouts, cards, navigation, forms, buttons, and typography' plus technical details like 'spacing scale, breakpoints, mobile-first patterns, and dark mode support'.	3 / 3
Completeness	Clearly answers both what ('Production-ready Tailwind CSS patterns for common website components...') and when ('Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts').	3 / 3
Trigger Term Quality	Includes natural terms users would say: 'UI components', 'landing pages', 'styling forms', 'navigation', 'responsive layouts', 'Tailwind CSS', 'cards', 'buttons', 'dark mode' - good coverage of common developer vocabulary.	3 / 3
Distinctiveness Conflict Risk	While 'Tailwind CSS' provides some distinction, terms like 'UI components', 'forms', 'navigation', and 'responsive layouts' could overlap with general CSS skills, React component skills, or other frontend styling skills.	2 / 3
	Total	11 / 12 Passed

Reviewed

15 days ago

Table of Contents

Validation Implementation Activation

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.