CtrlK
BlogDocsLog inGet started
Tessl Logo

tailwind-patterns

Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes.

92

1.56x
Quality

91%

Does it follow best practices?

Impact

89%

1.56x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

92%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a well-crafted quick-reference skill that is concise, actionable, and well-organized. It provides copy-paste ready HTML snippets covering the most common Tailwind patterns without over-explaining. The only minor weakness is the reference to a bundle file that doesn't exist, slightly undermining progressive disclosure.

DimensionReasoningScore

Conciseness

Every section is lean and reference-style. No unnecessary explanations of what Tailwind is or how CSS works. Tables and code snippets are compact and every token earns its place.

3 / 3

Actionability

All examples are copy-paste ready HTML/JS snippets with real Tailwind classes. The responsive breakpoints table, layout patterns, card, button, form input, and dark mode sections all provide concrete, executable code.

3 / 3

Workflow Clarity

This is a single-purpose reference skill (not a multi-step workflow), so the clear organization into distinct pattern categories with unambiguous examples is sufficient. No destructive or batch operations require validation checkpoints.

3 / 3

Progressive Disclosure

The skill references `./references/component-patterns.md` for additional patterns, which is good one-level-deep disclosure. However, no bundle files were provided, so the reference path cannot be verified, and the main content could benefit from slightly clearer navigation signaling between quick-reference sections and the deeper resource.

2 / 3

Total

11

/

12

Passed

Description

89%

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 solid description with explicit trigger terms and a clear domain focus on Tailwind CSS. Its main weakness is the lack of specific concrete actions—it reads more as a 'reference' than describing what it actually does (e.g., generate classes, configure themes, build responsive layouts). Adding concrete actions would elevate the specificity.

Suggestions

Replace 'Quick reference for' with specific actions like 'Provides utility class examples, builds responsive layouts, configures tailwind.config.js, and sets up dark mode styling.'

DimensionReasoningScore

Specificity

Names the domain (Tailwind CSS) and mentions some areas like 'utility patterns, responsive design, and configuration,' but doesn't list specific concrete actions (e.g., 'apply flex layouts,' 'configure custom themes,' 'set up dark mode toggles').

2 / 3

Completeness

Answers both 'what' (quick reference for Tailwind CSS utility patterns, responsive design, and configuration) and 'when' (explicit 'Triggers on:' clause listing specific trigger terms).

3 / 3

Trigger Term Quality

Includes a good set of natural trigger terms: 'tailwind', 'utility classes', 'responsive design', 'tailwind config', 'dark mode css', 'tw classes'. These cover common variations a user would naturally say.

3 / 3

Distinctiveness Conflict Risk

Clearly scoped to Tailwind CSS specifically, with distinct triggers like 'tailwind', 'tw classes', and 'tailwind config' that are unlikely to conflict with general CSS or other framework skills.

3 / 3

Total

11

/

12

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
NeverSight/skills_feed
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.