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

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/responsive-size/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 overview and a properly signaled one-level reference, but it pads the Explain section with redundant concept teaching, promises a before/after HTML example it never shows, and lacks an explicit verification checkpoint in the workflow.

Suggestions

Trim the 'Explain' section to stop re-teaching the bandwidth/pixel-count concept and remove the repeated wastage-ratio examples already covered in the intro and Quick Reference.

Replace the 'Show complete before/after HTML' directive with an actual <img srcset="..." sizes="..."> before/after code block so the guidance is copy-paste ready.

Add an explicit numbered verify step (e.g., '6) Re-run Lighthouse and confirm Properly size images reports 0 KiB savings') to close the workflow with a validation checkpoint.

Dimension	Reasoning	Score
Conciseness	The 'Explain' section re-teaches a concept Claude already knows ('bandwidth scales with pixel count, not linear dimensions') and wastage ratios repeat across the intro, Quick Reference, and Explain (16x / 4x / 25x); the Check/Fix sections are tight, so it is mostly efficient with some unnecessary explanation.	2 / 3
Actionability	Offers concrete guidance ('Generate multiple size variants: 400w, 800w, 1200w, 1600w (use Sharp or Squoosh)' and a real sizes="..." example) but instructs itself to 'Show complete before/after HTML' without ever delivering an actual <img srcset> markup example, leaving key details missing.	2 / 3
Workflow Clarity	Check (1-4) and Fix (1-5) are clearly sequenced and verification signals appear (Lighthouse audit as primary signal, 'confirm the fix in DevTools'), but there is no explicit numbered verify-checkpoint or fix->retry feedback loop in the sequence.	2 / 3
Progressive Disclosure	A well-organized overview (Quick Reference, Check, Fix, Explain, Code Review) with a clearly signaled one-level-deep reference ('see references/rule.md', which exists) — content is appropriately split and easy to navigate.	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 well-constructed: it explicitly covers both what to do and when to trigger, with several concrete actions. Its weaknesses are trigger-term naturalness (technical-leaning phrasing over user vocabulary) and mild overlap risk with other image-optimization skills.

Suggestions

Add natural user-facing trigger terms such as 'responsive images', 'srcset', and 'images too large/big' so it fires on the phrasings users actually say.

Narrow the trigger (e.g., drop 'CDN or build transforms' and 'loading strategy' unless essential) to reduce overlap with adjacent image rules like format choice and lazy loading.

Dimension	Reasoning	Score
Specificity	Quotes multiple concrete actions ('reviewing image assets, markup, and CDN or build transforms', 'Check encoded size, rendered size, loading strategy'), matching the anchor that lists several specific concrete actions rather than a single domain+action.	3 / 3
Completeness	An explicit 'Use when reviewing image assets...' trigger answers when, and 'Check encoded size, rendered size, loading strategy, and above-the-fold impact together' answers what — both present with an explicit trigger, so it is not capped at 2.	3 / 3
Trigger Term Quality	Includes relevant terms like 'image assets' and 'markup', but leans technical ('CDN or build transforms', 'above-the-fold impact') and omits the natural phrasings a user would actually say ('responsive images', 'srcset', 'images too big').	2 / 3
Distinctiveness Conflict Risk	Scoped to 'Serve images at the correct display size', but 'image assets, markup, and CDN or build transforms' plus 'loading strategy' could plausibly fire for adjacent image skills (formats, lazy loading, CDN), so it is somewhat specific with overlap risk.	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/responsive-size/SKILL.md
Commit: 48405aa

Reviewed: about 7 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.