image-optimization

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

Quality

78%

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/image-optimization/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 Quick Reference / Check / Fix / Explain / Code Review layout and a verified one-level reference, but it carries unnecessary conceptual preamble, defers its code examples to the reference without an inline copy-paste example, and lacks an explicit validation checkpoint for its batch image scan.

Suggestions

Trim the motivational opening paragraph and reduce the "Explain" section's conceptual coverage (format compression differences, how srcset/sizes work, why width/height prevent layout shift) to only task-relevant guidance, since Claude already knows these concepts.

Add at least one concrete, copy-paste-ready HTML example (e.g., a <picture> element with AVIF/WebP fallback plus a srcset/sizes block) directly in the Fix section instead of deferring all code to references/rule.md.

Insert an explicit verification checkpoint after Fix — re-measure file sizes against the < 200KB / < 50KB thresholds and confirm LCP/CLS in DevTools — with a validate → fix → retry loop, since scanning all images is a batch operation.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient with concrete Quick Reference bullets, but the motivational opening ("Images typically account for 50%+ of page weight...") and the conceptual "Explain" section (compression differences between AVIF/WebP/JPEG, how srcset/sizes work) restate knowledge Claude already has, so it is not level-3 lean yet is well above level-1 padding.	2 / 3
Actionability	Check and Fix give specific, concrete guidance (srcset variants 400w/800w/1200w/1600w, < 200KB photos, 80% quality), but no executable code or HTML example is shown inline and the actual "code examples" are deferred to references/rule.md, so it is concrete-but-incomplete rather than copy-paste ready.	2 / 3
Workflow Clarity	A clear Check → Fix sequence with numbered steps exists, but there is no explicit validation/verification checkpoint (e.g., re-measure file sizes, confirm LCP/CLS in DevTools) for what is a batch scan across all images, which per the rubric caps workflow clarity at 2.	2 / 3
Progressive Disclosure	The body is organized into clear overview sections and ends with a well-signaled one-level-deep pointer — "For full implementation details, code examples, and framework-specific guidance, see references/rule.md" — and that referenced file exists, matching the level-3 anchor for clear overview with one-level references.	3 / 3
	Total	9 / 12 Passed

Description

100%

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 strong: it uses third-person voice, opens with an explicit "Use when..." trigger, lists several concrete review/check actions, and carves out a distinct image-optimization niche. It clearly answers both what the skill does and when to invoke it.

Dimension	Reasoning	Score
Specificity	The description lists multiple concrete actions — "reviewing image assets, markup, and CDN or build transforms" and "Check encoded size, rendered size, loading strategy, and above-the-fold impact together" — matching the level-3 anchor of multiple specific concrete actions rather than the level-2 "some actions but not comprehensive."	3 / 3
Completeness	It 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 an explicit "Use when..." trigger clause, so it is not capped at 2.	3 / 3
Trigger Term Quality	It covers natural terms a frontend developer would say — "image assets", "markup", "CDN or build transforms", "loading strategy", "above-the-fold impact" — giving good coverage of relevant natural keywords, not merely technical jargon.	3 / 3
Distinctiveness Conflict Risk	It is scoped to a clear niche — image optimization and delivery — with distinct triggers unlikely to fire for unrelated skills, matching the level-3 "clear niche with distinct triggers" rather than the level-2 overlap case.	3 / 3
	Total	12 / 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/image-optimization/SKILL.md
Commit: 48405aa

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