CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-tailwind-best-practices

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

59

Quality

67%

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

65%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.

The body is a strong, actionable reference with concrete code and a useful anti-patterns table. It loses points because it poses as a multi-file skill (`@rules/*.md`, `Key Files`) without shipping those files, and as a reference it has no sequenced workflow.

Suggestions

Ship the referenced `@rules/*.md` files under a `references/` (or `rules/`) bundle directory, or drop the `@rules/...` pointers and keep the rules inline so links aren't broken.

Add a short "How to apply" sequence (identify the relevant domain → pick the rule → verify against the Anti-Patterns table) to give the reference a light workflow spine.

Trim the "When to Apply" list and intro line, which restate the description, to recover token budget.

DimensionReasoningScore

Conciseness

The body is largely lean — tight Bad/Good code, terse one-line rule summaries, a compact anti-patterns table — with only minor redundancy, notably the "When to Apply" list echoing the description and a restated intro line.

4 / 5

Actionability

Nearly every rule ships concrete, copy-paste TSX (v-stack, gap, dark variant, cn(), responsive prefixes) and an anti-patterns don't→do table; minor gaps are placeholder tokens ("base-classes", "variant-primary") in the cn() example and utilities (z-stack, spacer, circle) that are listed but never demonstrated.

4 / 5

Workflow Clarity

This is a static rules reference, not a multi-step process, so it has no sequenced steps or validation checkpoints; the content is well-organized but the dimension's sequenced-workflow expectations are not met (and the skill exceeds the 50-line simple-skill exception).

3 / 5

Progressive Disclosure

Sectioning is clean (Layout/Color/className/Affordances/Responsive, Anti-Patterns, Key Files) and rule references are signaled one level deep as `@rules/<name>.md`, but no bundle directory exists and the referenced `@rules/*.md` files are not shipped, so the navigation links resolve to nothing.

3 / 5

Total

14

/

20

Passed

Description

70%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.

The description is well-formed: third person, explicit "Use when" trigger, and a clear Tailwind niche. Its main weakness is that the capability half ("patterns and conventions") is abstract rather than a concrete action list.

Suggestions

Replace the abstract "patterns and conventions" with concrete actions, e.g. "Apply stack/color/className conventions to Tailwind components".

Add a few natural synonyms such as "utility classes" or bare "Tailwind" to broaden trigger coverage.

Tighten the when-clause to reference the actual rule domains (stacks, color schemes, className merging) to sharpen distinctiveness.

DimensionReasoningScore

Specificity

It names the domain ("Tailwind CSS patterns and conventions for frontend apps") and surfaces concrete tasks in the when-clause ("writing component styles, layouts, or working with CSS classes"), but the stated capability ("patterns and conventions") is abstract rather than a list of concrete actions, so it sits at the anchor that names the domain plus 1-2 actions without being comprehensive.

3 / 5

Completeness

It answers both what ("Tailwind CSS patterns and conventions for frontend apps") and when via an explicit "Use when writing component styles, layouts, or working with CSS classes" clause, but the what is phrased abstractly rather than as concrete actions, keeping it just below the fully concrete anchor.

4 / 5

Trigger Term Quality

It surfaces natural terms a user would say — "Tailwind CSS", "component styles", "layouts", "CSS classes", "frontend apps" — giving good coverage, though common variations like "utility classes" or bare "Tailwind" are missing.

4 / 5

Distinctiveness Conflict Risk

"Tailwind CSS" carves a clear, specific niche with low conflict risk, though the broad "CSS classes" trigger leaves minor overlap with general frontend styling skills.

4 / 5

Total

15

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
alpacapurpura/ap_sales_agent
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.