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

70%

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

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 clean Check/Fix split and proper use of a single reference file, and its thresholds are concrete and executable. It is held back by repeated explanations across sections and the absence of an explicit post-fix validation step for a batch operation.

Suggestions

Deduplicate the content: state the sizes-attribute/100vw behavior and bandwidth rationale once instead of repeating them across the intro, Quick Reference, and Explain sections.

Add an explicit verification step after Fix, e.g. "Re-run the Lighthouse 'Properly size images' audit and confirm the flagged images no longer appear" instead of the vague DevTools mention.

Inline one complete before/after <img> example (or clearly label the reference as containing them) so the Fix section does not rely on the instruction "Show complete before/after HTML".

Dimension	Reasoning	Score
Conciseness	The sizes/100vw point appears in both Quick Reference and Explain, the bandwidth-waste rationale is repeated between the intro and Explain, and the Lighthouse audit is named four times — the content is mostly efficient but noticeably redundant and could be tightened.	3 / 5
Actionability	Concrete thresholds ("more than 2x the rendered width", "images over 200px wide"), a specific variant set (400w/800w/1200w/1600w), a working sizes example, and named tools (Sharp, Squoosh) make the guidance mostly executable; the gap is that "Show complete before/after HTML" instructs rather than shows, deferring actual markup to the reference.	4 / 5
Workflow Clarity	The Check → Fix → Explain → Code Review sequence is clearly ordered, but for a batch audit-and-fix operation the only verification is the vague "describe how to confirm the fix in DevTools" — no explicit validation checkpoint, capping this at 3.	3 / 5
Progressive Disclosure	A short overview body defers full implementation details to a single, clearly signaled, one-level-deep reference (`references/rule.md`, which exists), with well-organized sections making navigation easy.	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.

A solid description with an explicit trigger clause and four concrete review dimensions, written in third person. Its main weaknesses are the awkward embedded rule title in the when-clause and the absence of common user phrasings like srcset or responsive images.

Suggestions

Rewrite the when-clause to use natural user phrasing, e.g. "Use when reviewing images for responsive sizing, srcset usage, or oversized image assets" instead of embedding the rule title.

Add common trigger synonyms such as "srcset", "responsive images", or "oversized images" so the description matches how users actually phrase the request.

State the core what as a plain action ("Audit images for oversizing and add srcset/sizes variants") rather than "related to Serve images at the correct display size".

Dimension	Reasoning	Score
Specificity	"Check encoded size, rendered size, loading strategy, and above-the-fold impact together" lists several concrete review actions, but the opening sentence embeds the rule title ("related to Serve images at the correct display size") rather than naming plain actions, leaving minor gaps versus the comprehensive anchor.	4 / 5
Completeness	Both an explicit "Use when reviewing image assets, markup, and CDN or build transforms" clause and a clear what ("Check encoded size, rendered size, loading strategy, and above-the-fold impact") are present, but the when leans on the awkward rule-title construction instead of concrete trigger phrases, so it does not reach the fully explicit anchor.	4 / 5
Trigger Term Quality	Natural terms like "image assets", "markup", "CDN", "rendered size", and "loading strategy" are present and would be said by users requesting image review, but common variations such as "srcset", "responsive images", or "oversized images" are missing.	4 / 5
Distinctiveness Conflict Risk	The sizing/serving niche is mostly distinct with clear triggers (encoded vs rendered size), though "image assets, markup, CDN" has minor overlap risk with adjacent image skills like format choice or lazy loading.	4 / 5
	Total	16 / 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: 7bfd868

Reviewed: 1 day 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.