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.

Quality

67%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/dimensions/SKILL.md

Quality

Content

57%

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 clean one-level-deep reference to a real rule.md, but it spends tokens re-explaining CLS concepts, keeps full executable code examples in the referenced file rather than inline, and treats fix verification only implicitly.

Suggestions

Trim the duplicated CLS mechanism explanation between the intro and the Explain section, trusting Claude's existing knowledge of Core Web Vitals.

Add at least one complete inline before/after HTML code block in the Fix section so the guidance is copy-paste ready without opening rule.md.

Make the verification step explicit in the workflow — e.g., a numbered 'Confirm in DevTools that no layout shift remains' checkpoint after fixing.

Dimension	Reasoning	Score
Conciseness	The opening paragraph and the Explain section both re-explain the CLS mechanism and Core Web Vitals background Claude already knows ('a Core Web Vitals metric', 'users accidentally click the wrong element'), so it is mostly efficient but could be tightened.	2 / 3
Actionability	Concrete inline guidance exists (e.g., width="800" height="450", 'CSS max-width: 100% and height: auto'), but the full executable before/after HTML blocks are deferred to references/rule.md rather than provided inline, fitting 'some concrete guidance but incomplete'.	2 / 3
Workflow Clarity	Check/Fix/Explain/Code Review sections with numbered Fix steps give a clear sequence, but the only verification ('describe how to confirm the fix in DevTools') is implicit rather than an explicit validation checkpoint in the workflow.	2 / 3
Progressive Disclosure	The body is organized into clear sections (Quick Reference, Check, Fix, Explain, Code Review) and points to a single, clearly signaled one-level-deep reference — 'see references/rule.md' — which exists as a real file, matching 'clear overview with well-signaled one-level-deep references'.	3 / 3
	Total	9 / 12 Passed

Description

77%

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 specific and complete with an explicit Use-when trigger and concrete review actions, but its trigger terms lean technical and its broadened scope (loading strategy, CDN/build transforms) creates overlap risk with general image-optimization skills.

Suggestions

Add natural user-facing trigger terms such as 'image dimensions', 'width and height', and 'layout shift' alongside the technical phrasing.

Tighten the scope so the description centers on dimension/CLS review rather than spanning encoded size and loading strategy, which blurs the line with image-optimization skills.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'reviewing image assets, markup, and CDN or build transforms', 'Check encoded size, rendered size, loading strategy, and above-the-fold impact together', and 'Separate real CLS risks from tiny decorative SVGs' — matching the 'lists multiple specific concrete actions' anchor.	3 / 3
Completeness	An explicit 'Use when reviewing image assets...' trigger answers when, while 'Check encoded size, rendered size, loading strategy...' and 'Separate real CLS risks...' answer what, matching 'clearly answers both what AND when with explicit triggers'.	3 / 3
Trigger Term Quality	Relevant terms appear ('image assets', 'CLS risks', 'decorative SVGs') but the language leans technical ('CDN or build transforms', 'above-the-fold impact') and omits common natural variations a user would say like 'image dimensions', 'width and height', or 'layout shift', fitting 'some relevant keywords but missing common variations'.	2 / 3
Distinctiveness Conflict Risk	The dimensions/CLS core is a clear niche, but the description broadens into 'encoded size, rendered size, loading strategy' and 'CDN or build transforms', territory that overlaps with general image-optimization skills, fitting 'somewhat specific but could still overlap with similar skills'.	2 / 3
	Total	10 / 12 Passed

Validation

93%

Warnings & errors only

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

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/dimensions/SKILL.md
Commit: 48405aa

Reviewed: about 9 hours ago

Table of Contents

Discovery Implementation Validation

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.