tessl install https://github.com/jezweb/claude-skills --skill tailwind-patternsgithub.com/jezweb/claude-skills
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.
Average Score
96%
Content
100%
Description
92%
Generated
Validations
Total score
13/16| Criteria | Score |
|---|---|
skill_md_line_count SKILL.md is long (509 lines); consider splitting into references/ and linking | |
frontmatter_valid YAML frontmatter is valid | |
name_field 'name' field is valid: 'tailwind-patterns' | |
description_field 'description' field is valid (352 chars) | |
description_voice 'description' uses third person voice | |
description_trigger_hint Description includes an explicit trigger hint | |
compatibility_field 'compatibility' field not present (optional) | |
allowed_tools_field 'allowed-tools' field not present (optional) | |
metadata_version 'metadata' field is not a dictionary | |
metadata_field 'metadata' field not present (optional) | |
license_field 'license' field is missing | |
frontmatter_unknown_keys No unknown frontmatter keys found | |
body_present SKILL.md body is present | |
body_examples Examples detected (code fence or 'Example' wording) | |
body_output_format Output/return/format terms detected | |
body_steps Step-by-step structure detected (ordered list) |
Content
Total score
12/12| Dimension | 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 |
Overall Assessment
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.
Description
Total score
11/12| Dimension | 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 |
Overall Assessment
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.