tailwind-css-patterns
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.
Install with Tessl CLI
npx tessl i github:giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns87
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
100%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 well-crafted skill description that excels across all dimensions. It provides specific capabilities, uses natural developer terminology, explicitly states both what it does and when to use it, and clearly distinguishes itself as a Tailwind CSS-specific skill rather than general CSS guidance.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices' - these are concrete, actionable capabilities. | 3 / 3 |
Completeness | Clearly answers both what (Tailwind CSS utility patterns including responsive design, layout, etc.) AND when ('Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow'). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'Tailwind CSS', 'responsive design', 'flexbox', 'grid', 'React/Vue/Svelte components', 'design systems', 'CSS workflow' - all terms developers naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on Tailwind CSS utility-first approach, distinct from general CSS skills or other styling frameworks. The explicit mention of 'Tailwind CSS' and 'utility-first' creates a clear boundary. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a solid, highly actionable Tailwind CSS reference with excellent executable examples covering responsive design, components, accessibility, and v4.1 features. The main weaknesses are its length (could benefit from progressive disclosure into separate files) and occasional redundant comments explaining what utility classes do. Overall, it serves as an effective quick reference for Tailwind development patterns.
Suggestions
Split into multiple files (e.g., COMPONENTS.md, ACCESSIBILITY.md, V4_FEATURES.md) with SKILL.md as a concise overview pointing to each
Remove inline comments that explain what utility classes do (e.g., '<!-- Full width on mobile -->') since Claude can infer this from class names
Consider condensing the breakpoint prefixes list and color examples into more compact reference tables
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is comprehensive but includes some unnecessary verbosity. Comments like '<!-- Full width on mobile, half on tablet, third on desktop -->' explain what Claude can infer from the classes. Some sections could be tightened, though most content earns its place. | 2 / 3 |
Actionability | Excellent actionability with fully executable HTML/CSS/JSX code examples throughout. Every pattern includes copy-paste ready code with real class names and complete component structures. | 3 / 3 |
Workflow Clarity | For a reference/pattern skill, workflow clarity is appropriate. The content is well-sequenced from core concepts to advanced features, and the 'Best Practices' section provides clear guidance. No destructive operations require validation checkpoints. | 3 / 3 |
Progressive Disclosure | The skill is a monolithic document (~600 lines) that could benefit from splitting into separate files (e.g., components.md, accessibility.md, v4-features.md). References to external docs are present but internal organization could be improved. | 2 / 3 |
Total | 10 / 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 (813 lines); consider splitting into references/ and linking | Warning |
metadata_version | 'metadata' field is not a dictionary | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | 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.