broken-images

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

Quality

73%

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/broken-images/SKILL.md

Quality

Content

71%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 flow and exemplary progressive disclosure to a single reference file, but it loses conciseness points to an 'Explain' section that re-teaches browser basics Claude already knows. Actionability and workflow clarity are strong but stop just short of fully executable, checkpointed guidance.

Suggestions

Trim or remove the 'Explain' section's basic browser behavior (404 → broken-image icon, console error) since Claude already knows this; keep only the LCP/SEO rationale that adds value.

Fold the DevTools verification step directly into the Fix sequence as an explicit checkpoint (e.g., 'After adding onerror, block the image request in DevTools and confirm the fallback renders') to create a fix→verify feedback loop.

Convert the prose-numbered Check/Fix lists into true bulleted or code-fenced steps so the inline guidance is as executable as the onerror snippet.

Dimension	Reasoning	Score
Conciseness	Mostly efficient with tight Check/Fix steps, but the 'Explain' section restates concepts Claude already knows ('A 404 response for an image shows the browser's broken-image icon, causes a console error') and overlaps with the intro paragraph. Not a 4 because of this redundant known-concept padding.	3 / 5
Actionability	Provides a copy-paste inline onerror snippet and concrete Check/Fix steps, with full code examples offloaded to references/rule.md. Not a 5 because the body's Check/Fix steps are prose-numbered rather than executable and the bulk of runnable code lives in the reference.	4 / 5
Workflow Clarity	Clear Check→Fix sequence with a verification cue ('Test with DevTools Network tab blocked requests to verify fallback behaviour') and a safety guard (this.onerror=null); validation is present so the destructive/batch cap does not apply. Not a 5 because verification is not woven into the Fix steps as an explicit checkpoint or fix→re-verify feedback loop.	4 / 5
Progressive Disclosure	SKILL.md is an overview pointing to a single one-level-deep, clearly signaled reference ('see references/rule.md'), which exists and is well-organized with code examples. Matches the 'clear overview with well-signaled one-level-deep references' anchor.	5 / 5
	Total	16 / 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 is well-formed with explicit 'what' and 'when' guidance and a clear niche, but its listed actions lean toward image optimization rather than broken-image remediation and miss common user phrasings like 'image 404' or 'image not loading'. It sits solidly at the 4-anchor across all dimensions.

Suggestions

Rewrite the action list to reflect broken-image work (e.g., 'Validate <img src> paths, add onerror fallback handlers, prevent infinite error loops') instead of generic image-optimization metrics.

Add concrete trigger synonyms users actually say, such as 'image 404', 'image not loading', or 'missing image', rather than relying on the rule-title phrase 'Fix broken images'.

Make the 'when' clause less circular by naming the specific situations (broken-image icons, console 404s on images, LCP harmed by a missing hero image) instead of 'related to Fix broken images'.

Dimension	Reasoning	Score
Specificity	Lists several concrete review actions ('Check encoded size, rendered size, loading strategy, and above-the-fold impact') alongside the image/markup/CDN domain, matching the 'several specific actions' anchor. Not a 5 because coverage is templated rather than comprehensive and several listed actions are image-optimization concerns rather than broken-image actions.	4 / 5
Completeness	Provides both a 'what' (reviewing/checking image assets, markup, CDN/build transforms) and an explicit 'when' ('Use when reviewing…'). Not a 5 because the 'when' clause is somewhat circular ('related to Fix broken images') and lacks concrete, varied trigger phrases.	4 / 5
Trigger Term Quality	Includes the natural term 'broken images' plus 'image assets' and 'markup', giving good keyword coverage. Not a 5 because common user phrasings like 'image 404', 'image not loading', or 'missing image' are absent and 'Fix broken images' reads as a rule title rather than a trigger.	4 / 5
Distinctiveness Conflict Risk	Anchored to a broken-images niche with distinct triggers, but the optimization framing ('encoded size, rendered size, loading strategy, above-the-fold impact') creates minor overlap with general image-optimization skills. Not a 5 due to that overlap risk; clearly above the 3 anchor.	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/broken-images/SKILL.md
Commit: 30756a7

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