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.
Install with Tessl CLI
npx tessl i github:jezweb/claude-skills --skill tailwind-patterns96
Does it follow best practices?
Validation for skill structure
Discovery
92%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
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 |
Implementation
100%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
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 |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 13 / 16 Passed
Validation for skill structure
| 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 | |
- Reviewed
Table of Contents
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.