CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend-tailwind-best-practices

Tailwind CSS patterns and conventions for frontend apps. Use when writing component styles, layouts, or working with CSS classes.

64

Quality

80%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/frontend-tailwind-best-practices/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

85%Weight 40%Scale 1-5

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

A well-organized, highly actionable reference skill with tight examples and clear priorities. Its one real defect is that every rule points to a @rules/*.md detail file that is missing from the bundle, so the promised progressive-disclosure layer does not actually exist.

Suggestions

Ship the ten referenced @rules/*.md files in the bundle (or inline the CRITICAL rules and stop referencing nonexistent paths).

Trim the 'When to Apply' section and intro line, which duplicate the frontmatter description.

DimensionReasoningScore

Conciseness

The body is efficient — each rule is a one-line summary plus a compact example, and the custom utility list teaches things Claude cannot know. The 'When to Apply' section and the intro sentence largely duplicate the frontmatter description and could be trimmed, keeping it below anchor 5.

4 / 5

Actionability

Every rule includes copy-paste-ready code with Bad/Good comparisons, custom utilities are enumerated, the anti-patterns table gives direct substitutions, and key file paths (~/lib/cn, tailwind.config.js) are specified. Specific examples cover the common cases.

5 / 5

Workflow Clarity

This is a single-purpose reference skill with no multi-step process; the single action (apply these conventions when writing Tailwind styles) is unambiguous. CRITICAL/HIGH/MEDIUM priority labels sequence attention, and no destructive or batch operations exist that would require validation checkpoints.

5 / 5

Progressive Disclosure

Structure is good — each rule is a brief inline summary with a clearly signaled one-level-deep pointer like '@rules/layout-stack-utilities.md'. However, none of the ten referenced @rules/*.md files exist in the bundle (no references/, scripts/, or assets/ directories are present), so the disclosure chain is broken — a bigger problem than the 'minor organization gaps' of anchor 4, yet better than anchor 2's buried or monolithic structure.

3 / 5

Total

17

/

20

Passed

Description

65%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A solid description with an explicit 'Use when' clause and natural trigger terms anchored by the Tailwind CSS domain. Its main weakness is the vague what-clause — 'patterns and conventions' says nothing concrete about what the skill does.

Suggestions

Replace 'patterns and conventions' with concrete actions, e.g. 'Applies stack utilities, gap-based spacing, class-based dark mode, and cn() className merging in Tailwind projects'.

Add natural trigger synonyms users would say: 'styling', 'responsive design', 'dark mode', 'design tokens'.

DimensionReasoningScore

Specificity

The what-clause 'Tailwind CSS patterns and conventions for frontend apps' names the domain but offers no concrete action — 'patterns and conventions' is generic. The concrete activities (writing component styles, layouts) appear only in the when-clause, so it does not reach anchor 3's '1-2 concrete actions' describing capability.

2 / 5

Completeness

Both what ('Tailwind CSS patterns and conventions for frontend apps') and when ('Use when writing component styles, layouts, or working with CSS classes') are explicitly present. Below anchor 5 because the what remains generic rather than concrete actions.

4 / 5

Trigger Term Quality

Natural user terms are present: 'Tailwind CSS', 'component styles', 'layouts', 'CSS classes'. It falls short of anchor 5's comprehensive synonym coverage — missing 'styling', 'responsive design', 'dark mode', 'spacing'.

4 / 5

Distinctiveness Conflict Risk

'Tailwind CSS' carves a clear niche with minimal conflict risk, but the broad trigger 'working with CSS classes' could overlap with a plain CSS or general styling skill, keeping it below anchor 5.

4 / 5

Total

14

/

20

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

alpacapurpura/ap_sales_agent

Path

.agents/skills/frontend-tailwind-best-practices/SKILL.md

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.