critical-images

Use when reviewing image assets, markup, and CDN or build transforms related to Prioritize loading critical images. 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/critical-images/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 SKILL.md body is a well-organized, appropriately split overview that correctly defers detail to a one-level-deep reference. Its weaknesses are mild redundancy, the absence of any executable code or explicit verification checkpoints in the body itself, and a templated Check/Fix/Explain structure that could be tighter.

Suggestions

Inline one minimal copy-paste example (e.g., the fetchpriority/preload snippet) so the overview is actionable without opening the reference.

Add an explicit verification checkpoint in the body (e.g., "Confirm in DevTools Network tab that the hero image has Priority: High and no loading='lazy'") rather than only deferring it.

Collapse the redundant "Explain" section and the motivational 20-40% intro to remove overlap with the "Fix" and Quick Reference content.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean, but the motivational intro stat ("improve LCP by 20-40%... Core Web Vitals and SEO"), the redundant "Explain" section restating that prioritization improves LCP, and Quick Reference overlapping with "Fix" could be tightened.	2 / 3
Actionability	It names concrete attributes ("fetchpriority='high'", "preload hero images in document head", "Remove loading='lazy'") but provides no executable code blocks in the body—all copy-paste examples are deferred to references/rule.md, leaving the overview incomplete on its own.	2 / 3
Workflow Clarity	The Check→Fix→Explain→Code Review structure gives a loose sequence, but there are no explicit validation/verification checkpoints in the body; confirmation is only gestured at ("describe how to confirm the fix in DevTools") and detailed in the reference.	2 / 3
Progressive Disclosure	The body is a concise, well-sectioned overview that signals a single one-level-deep reference—"see `references/rule.md`" for full details—and that file exists, matching the anchor for clear overview with well-signaled shallow references.	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 concrete, action-oriented, and has an explicit "Use when..." trigger, so it answers both what and when clearly. It loses points for missing the most common natural trigger terms (LCP, hero image, Core Web Vitals) and for moderate overlap with adjacent image-optimization skills.

Suggestions

Add natural trigger terms a user would actually say—e.g., "LCP image", "hero image", "Core Web Vitals", "page speed"—alongside the existing technical vocabulary.

Sharpen distinctiveness by foregrounding the loading-priority/LCP angle (e.g., "Use when the LCP element is an image or hero image loads too slowly") so it does not collide with generic image-optimization skills.

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 anchor for several specific concrete actions.	3 / 3
Completeness	It explicitly states what the skill does (review/check image assets, markup, CDN/build transforms, sizes, loading strategy) and when to use it via an explicit "Use when reviewing..." trigger clause, satisfying both what and when.	3 / 3
Trigger Term Quality	It includes relevant terms ("image assets", "critical images", "above-the-fold", "loading strategy") but omits the most natural user phrasings like "LCP", "hero image", "Core Web Vitals", or "page speed" that the body itself references.	2 / 3
Distinctiveness Conflict Risk	The "critical images" / loading-priority niche is fairly specific, but triggers like "image assets, markup, CDN or build transforms" and "loading strategy" could overlap with sibling image-optimization skills (responsive images, formats, lazy loading) in the same checklist family.	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/critical-images/SKILL.md
Commit: 48405aa

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