srcset

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

Quality

68%

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/srcset/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, concise overview that correctly delegates executable detail to a real reference file, with concrete check and fix steps. Its main weakness is that no inline executable code and no explicit validation/verification loop are present in the body itself.

Suggestions

Add one minimal inline srcset+sizes code example in the Fix section so the body is actionable without opening the reference.

Insert an explicit verification step in the workflow (e.g. "Verify in DevTools Network which candidate loads at each breakpoint; if wrong, adjust sizes and re-check") to create a validate→fix→retry loop.

Replace the single trailing pointer with labeled per-topic references (e.g. "Full code examples & layout patterns: see references/rule.md") to make navigation clearer.

Dimension	Reasoning	Score
Conciseness	The body is lean, well-sectioned, and assumes Claude's competence without explaining what srcset is or how browsers work. It is not a 5 because the opening bandwidth sentence and parts of the Explain section repeat detail that also appears in references/rule.md and could be trimmed further.	4 / 5
Actionability	Concrete numbered criteria and fix steps are present ("Flag: 1) Any <img> wider than 100px that lacks a srcset"; "Generate multiple width variants: typically 400w, 800w, 1200w"), but all executable code lives in the reference file rather than the body. It is not a 4 because no copy-paste-ready code or commands appear inline; it is above 2 because the guidance is specific rather than vague hints.	3 / 5
Workflow Clarity	A clear sequence exists (Check → Fix → Explain → Code Review) with numbered steps, but there is no explicit validation or verify→fix→retry checkpoint within the workflow. Per the rubric, missing validation in a review/batch-style workflow caps this at 3; it is above 2 because the steps are well-defined and ordered.	3 / 5
Progressive Disclosure	The body is an overview that delegates implementation detail to a single, well-signaled, one-level-deep reference (references/rule.md, which exists and holds the full code examples). It is not a 5 because the pointer is a single trailing line rather than clearly labeled per-topic references, leaving minor navigation gaps.	4 / 5
	Total	14 / 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 clearly states both what the skill does and when to use it, with concrete review dimensions and natural trigger terms tied to a specific responsive-images feature. It is strong throughout, with only minor gaps in synonym coverage and action enumeration.

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete review actions ("Check encoded size, rendered size, loading strategy, and above-the-fold impact"; "reviewing image assets, markup, and CDN or build transforms"), with only minor gaps in coverage. It is not a 5 because the actions are composite inspection verbs rather than an exhaustive, enumerated list of concrete outputs, and not a 3 because it lists several specific actions rather than just one or two.	4 / 5
Completeness	It explicitly answers both: the "what" ("Check encoded size, rendered size, loading strategy, and above-the-fold impact together") and the "when" ("Use when reviewing image assets, markup, and CDN or build transforms related to Use srcset"). It is not a 5 because the "what" is a single composite action rather than multiple concrete trigger phrases paired with explicit trigger conditions.	4 / 5
Trigger Term Quality	Good coverage of natural terms a frontend user would say ("image assets", "markup", "CDN", "build transforms", "srcset", "responsive images", "above-the-fold"), with a few natural variations missing (e.g. "bandwidth", "image optimization", "performance"). It is above 3 due to breadth but below 5 because it lacks common synonyms and file/extension triggers.	4 / 5
Distinctiveness Conflict Risk	Scoped to a specific HTML feature (srcset for responsive images) with a narrow review surface, giving minimal conflict risk. It is not a 5 because the breadth across "image assets, markup, and CDN or build transforms" creates minor overlap with general image-optimization skills.	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/srcset/SKILL.md
Commit: 30756a7

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