CtrlK
BlogDocsLog inGet started
Tessl Logo

responsive-units

Use when reviewing stylesheets, component styles, and responsive behavior related to Use relative units for responsive layouts. Check the rendered layout across breakpoints and interaction states before proposing a fix.

56

Quality

64%

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 ./skills/responsive-units/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

72%

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 well-structured, token-efficient overview that correctly defers detail to a single real reference file, but its in-body guidance lacks the concrete conversion details and explicit verification checkpoints needed to be fully actionable on its own.

Suggestions

Add the rem conversion rule (e.g., "rem = px / 16" with one inline example) so the Fix step is executable without opening the reference.

Surface a brief verification checkpoint in the body (e.g., "Confirm computed styles match in DevTools before shipping") rather than relying solely on rule.md.

Consider one inline code snippet (good vs. bad px/rem) in the Quick Reference to make the rule immediately actionable.

DimensionReasoningScore

Conciseness

The body is lean: a short rationale, a quick-reference bullet list, and one-line Check/Fix/Explain/Code Review sections, deferring detail to rule.md; it does not over-explain concepts Claude already knows.

3 / 3

Actionability

Concrete direction is present ("Find all px-based font-size, width, and padding values", "Convert fixed px font sizes to rem equivalents", "Flag exact selectors"), but key details like the rem conversion (divide px by 16) and code examples are missing from the body and only live in the reference.

2 / 3

Workflow Clarity

The Check → Fix → Explain → Code Review sequence is present, but validation/verification checkpoints are only implicit in the body (the explicit verification steps live in rule.md), leaving a checkpoint gap.

2 / 3

Progressive Disclosure

The body is a concise overview with a clearly signaled, one-level-deep pointer to the real references/rule.md file, and content is appropriately split between overview and detailed reference.

3 / 3

Total

10

/

12

Passed

Description

57%

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 has an explicit trigger and answers both what and when, but it is written in second-person imperative voice rather than third person and embeds the rule title awkwardly, which weakens specificity and trigger clarity.

Suggestions

Rewrite in third person (e.g., "Reviews stylesheets and responsive behavior for fixed-unit usage..."), then append the "Use when..." trigger, to satisfy the voice requirement and lift specificity.

Add common user terms like "CSS", "media queries", "rem/em/px", and "font size" to broaden trigger coverage.

Remove the duplicated embedded title ("related to Use relative units for responsive layouts") so the capability statement reads cleanly.

DimensionReasoningScore

Specificity

Base specificity is ~2 ("reviewing stylesheets, component styles, and responsive behavior", "Check the rendered layout across breakpoints and interaction states", "proposing a fix" name a domain and some actions but are review-generic and muddled by the jammed-in title), but the description is written in second-person imperative voice ("Use when...", "Check...") with no third-person capability clause, so the voice penalty reduces it by 1.

1 / 3

Completeness

It answers both what ("Check the rendered layout across breakpoints and interaction states before proposing a fix") and when (explicit "Use when reviewing stylesheets, component styles, and responsive behavior..." trigger), so it is not capped at 2.

3 / 3

Trigger Term Quality

Relevant natural terms are present ("stylesheets", "component styles", "responsive behavior", "breakpoints", "interaction states"), but common variations a user would say ("CSS", "media queries", "rem/em/px", "font size") are missing.

2 / 3

Distinctiveness Conflict Risk

The responsive-units CSS niche is fairly specific, but the trigger ("reviewing stylesheets, component styles, and responsive behavior") could still overlap with sibling CSS/frontend review skills.

2 / 3

Total

8

/

12

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
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.