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.

58

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 ./skills/responsive-units/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 well-structured, concise overview with exemplary one-level-deep progressive disclosure to references/rule.md, but it lacks executable conversion specifics and explicit validation checkpoints within the body itself, capping actionability and workflow clarity.

Suggestions

Add the px-to-rem conversion formula (e.g. 'rem = px / 16, assuming the default 16px root') to the Fix section so the core action is executable without opening the reference.

Surface an explicit verification checkpoint in the body (e.g. 'After converting, confirm computed styles in DevTools at one mobile and one desktop viewport') rather than deferring all validation to references/rule.md.

Trim the intro paragraph and Quick Reference bullets that restate relative-unit basics Claude already knows to push conciseness toward a lean 5.

DimensionReasoningScore

Conciseness

The body is tight — a two-sentence intro, a four-bullet Quick Reference, and short Check/Fix/Explain/Code Review sections — but the intro and Quick Reference restate relative-unit basics Claude already knows, so a few tokens could be trimmed rather than earning a lean 5.

4 / 5

Actionability

The Check and Fix sections give concrete direction ('Find all px-based font-size, width, and padding values', 'Convert fixed px font sizes to rem equivalents') but the core conversion method (e.g. divide by 16) and any executable code are deferred to the reference, leaving a key detail missing from the body.

3 / 5

Workflow Clarity

The Check/Fix/Explain/Code Review sections list tasks, but they read as parallel modes rather than a sequenced process, and the body has no explicit validation checkpoint — verification lives only in references/rule.md, matching the anchor with implicit/missing checkpoints.

3 / 5

Progressive Disclosure

The body is a clear overview and signals a single one-level-deep reference ('see references/rule.md'), which exists and holds the code examples, unit table, and verification steps — content is appropriately split and easy to navigate.

5 / 5

Total

15

/

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 provides an explicit 'Use when' trigger and concrete review actions, but the phrasing 'related to Use relative units for responsive layouts' is grammatically awkward and the stated 'what' emphasizes reviewing over the core unit-conversion capability.

Suggestions

Reword the description to fix the 'related to Use relative units for responsive layouts' fragment, e.g. 'Reviews stylesheets for fixed px values and converts them to relative units (rem, em, %, clamp). Use when auditing CSS for responsive accessibility.'

Name the core capability (converting px to rem/em/%/clamp) explicitly so the 'what' matches the skill's actual purpose rather than only describing a review pass.

Add natural synonyms users would say ('px to rem', 'fixed pixels', 'fluid typography') to broaden trigger coverage.

DimensionReasoningScore

Specificity

Phrases like 'reviewing stylesheets, component styles, and responsive behavior' and 'Check the rendered layout across breakpoints and interaction states' name the domain and give 1-2 concrete review actions, but coverage is not comprehensive — the core unit-conversion capability is not stated as an action.

3 / 5

Completeness

Both 'what' (review stylesheets, check rendered layout) and 'when' ('Use when reviewing stylesheets...') are present, but the 'what' is generic review phrasing and the 'when' could be more specific, so it falls short of the explicit concrete-trigger anchor 5.

4 / 5

Trigger Term Quality

Natural terms 'stylesheets', 'component styles', 'responsive behavior', 'breakpoints', and 'interaction states' give good keyword coverage, though common synonyms like 'px to rem' or 'fixed pixels' are missing.

4 / 5

Distinctiveness Conflict Risk

The niche 'relative units for responsive layouts' is named, making it mostly distinct from sibling CSS rules, though minor overlap risk remains with other responsive-layout CSS skills in the same checklist family.

4 / 5

Total

15

/

20

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.