CtrlK
BlogDocsLog inGet started
Tessl Logo

dimensions

Use when reviewing image assets, markup, and CDN or build transforms related to Set explicit width and height on images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together. Separate real CLS risks from tiny decorative SVGs or ornament-only assets that are unlikely to move surrounding content.

60

Quality

70%

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/dimensions/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 well-structured with a clear review workflow and good progressive disclosure to rule.md, but it over-explains CLS mechanics Claude already knows and lacks an explicit validation checkpoint in the fix flow.

Suggestions

Collapse the duplicated CLS mechanism explanation—the intro paragraph and the 'Explain' section cover the same ground; keep one concise version and drop the search-rankings tangent.

Add an explicit validation checkpoint in Fix, e.g. 'Verify in DevTools Performance/CLS that the shift is eliminated before closing the finding'.

Include one complete before/after HTML code block inline so the fix is copy-paste ready without opening the reference.

DimensionReasoningScore

Conciseness

Mostly efficient with well-organized sections, but the opening CLS paragraph and the 'Explain' section both re-explain the layout-shift mechanism Claude already knows, and the 'Google penalises in search rankings' tangent is padding.

3 / 5

Actionability

The Fix section gives concrete, executable guidance (width="800" height="450", max-width: 100%, height: auto, aspect-ratio) and Check gives precise scan instructions, though no complete before/after code block appears inline in the body.

4 / 5

Workflow Clarity

The Check→Fix→Explain→Code Review sequence is clear, but validation is only implicit ('describe how to confirm the fix in DevTools') with no explicit validate-and-retry checkpoint for the fix step.

3 / 5

Progressive Disclosure

At 47 lines the body is a well-organized overview with clearly signaled one-level-deep delegation ('see references/rule.md') for full code examples and framework guidance; the referenced file exists and is appropriately split.

5 / 5

Total

15

/

20

Passed

Description

75%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 explicitly answers both what and when with multiple concrete review actions and a clear CLS focus. It could sharpen trigger phrases to natural user language and tighten the awkwardly embedded rule title.

Suggestions

Reword 'related to Set explicit width and height on images' into natural trigger phrasing like 'Use when reviewing images for missing width/height attributes, layout shift, or CLS issues'.

Add common synonyms users actually say—'image dimensions', 'width and height', 'layout shift'—alongside 'CLS'.

Narrow 'CDN or build transforms' to image-specific transforms to reduce overlap with general frontend build skills.

DimensionReasoningScore

Specificity

Lists several concrete actions—'reviewing image assets, markup, and CDN or build transforms', 'Check encoded size, rendered size, loading strategy, and above-the-fold impact', 'Separate real CLS risks from tiny decorative SVGs'—with strong object detail, though the embedded rule title slightly muddies the action phrasing.

4 / 5

Completeness

Both 'what' (review/check/separate) and 'when' ('Use when reviewing image assets...') are present; the 'when' references the rule title rather than crisp user trigger phrases, so it could be more explicit.

4 / 5

Trigger Term Quality

Good natural-term coverage ('image assets', 'markup', 'CLS risks', 'decorative SVGs', 'above-the-fold'), but misses common synonyms users would say like 'image dimensions', 'width and height', or 'layout shift' spelled out.

4 / 5

Distinctiveness Conflict Risk

Focused on image dimensions/CLS with a clear niche, but 'CDN or build transforms' casts a slightly wide net creating minor overlap risk with neighboring frontend/image skills.

4 / 5

Total

16

/

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.