responsive-size

Use when reviewing image assets, markup, and CDN or build transforms related to Serve images at the correct display size. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.

Quality

72%

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/responsive-size/SKILL.md

Quality

Content

61%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-organized, actionable overview that delegates detail to one reference file, but it carries redundancy with that reference and lacks an explicit verification checkpoint for what is fundamentally a batch audit workflow.

Suggestions

Add a 'Verify' step after Fix (e.g., re-run the Lighthouse 'Properly size images' audit or the DevTools console check from references/rule.md) so the batch workflow has an explicit validation checkpoint.

De-duplicate the body: remove the repeated hero-image megabytes sentence from the intro or Quick Reference, and tighten the intro since the same framing appears in references/rule.md.

Inline at least one minimal before/after <img> with srcset/sizes in the Fix section (or fix the unterminated quote in the inline sizes example) so the body is self-contained without requiring the reference.

Dimension	Reasoning	Score
Conciseness	Mostly efficient but contains redundancy — the hero-image megabytes sentence is repeated between the intro and Quick Reference, and the Quick Reference overlaps with the Check section; the intro paragraph could be trimmed since it reappears in references/rule.md.	3 / 5
Actionability	Check and Fix give concrete, thresholded guidance (flag >2x intrinsic vs rendered, 200px srcset cutoff, generate 400w/800w/1200w/1600w with Sharp/Squoosh, a sizes example), but the body's promised 'complete before/after HTML' and full code live in the reference rather than inline.	4 / 5
Workflow Clarity	Numbered sequences exist for Check (1-4) and Fix (1-5), but this is a batch/audit operation across all images with no explicit validation or verify-the-fix checkpoint in the body — the cap for batch operations without validation applies.	3 / 5
Progressive Disclosure	Clear sectioned overview (Quick Reference, Check, Fix, Explain, Code Review) with a single well-signaled one-level-deep pointer to references/rule.md; the detailed Check/Fix steps are arguably content that could live in the reference, a minor organization gap.	4 / 5
	Total	14 / 20 Passed

Description

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

A strong, well-structured description that clearly states both capability and trigger conditions with concrete sub-actions. It is mostly distinct from sibling skills, with only minor keyword and overlap gaps.

Dimension	Reasoning	Score
Specificity	Lists several concrete actions ('Check encoded size, rendered size, loading strategy, and above-the-fold impact') with a defined domain (image assets, markup, CDN/build transforms), though the verbs 'reviewing'/'Check' are somewhat generic, leaving minor coverage gaps.	4 / 5
Completeness	Explicitly answers both 'what' ('Check encoded size, rendered size, loading strategy, and above-the-fold impact together') and 'when' ('Use when reviewing image assets, markup, and CDN or build transforms...') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Good natural-term coverage ('image assets', 'markup', 'CDN', 'build transforms', 'display size') but missing common synonyms users would say like 'srcset', 'responsive images', or image file extensions.	4 / 5
Distinctiveness Conflict Risk	Clear niche around image display sizing, but mention of 'loading strategy' and 'above-the-fold impact' creates minor overlap risk with closely related lazy-loading and LCP image skills.	4 / 5
	Total	17 / 20 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/responsive-size/SKILL.md
Commit: 30756a7

Reviewed: 9 days 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.