Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →thedaviddias/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.
Passed 19 of 22 test cases with the skill, and 18 of 22 without it.
and 2 more in the full report
3 fixed16 passed either way1 still failing2 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
Please scan our codebase's template files and stylesheets for any broken image references or missing fallback attributes. Provide a detailed report listing every problematic image link alongside its file location and line number.
| Checked | Without skill | With skill |
|---|---|---|
| The evaluation checks whether img tags lack an onerror fallback mechanism. | Missed | Passed |
| The analysis checks if referenced image paths point to actual files on disk. | Missed | Passed |
| The output identifies dynamic or external image references that carry availability risks. | Missed | Passed |
The instructions your model reads when the skill loads.
A broken image shows an ugly placeholder icon, breaks visual layouts, and communicates that the site is poorly maintained. If the broken image is the Largest Contentful Paint element, it also harms LCP scores. On e-commerce sites, a missing product image can directly reduce purchase intent.
<img src> paths at build timeonerror handlers to swap broken <img> elements to fallback imagesthis.onerror=null inside the handler to prevent infinite error loopsScan all src attributes and CSS background-image URLs in this codebase. Identify: 1) Any relative or absolute paths that point to files not present in the project. 2) Any elements without an onerror handler or fallback mechanism. 3) Hardcoded external image URLs that may become unavailable. 4) Dynamic image paths constructed from user data without existence checks. Report each broken or potentially broken image with its file path and line number.
For each broken image: 1) Correct the file path if the image exists but the path is wrong. 2) Add the missing image asset if it was omitted. 3) For images that may fail at runtime, add an onerror handler: onerror="this.src='/images/fallback.png'; this.onerror=null;". 4) For React/Vue components, implement an onError callback that swaps the src to a placeholder. 5) For external images, consider downloading and self-hosting or using a CDN with fallback. Always set this.onerror=null to prevent infinite error loops.
Explain why broken images degrade user experience and how browsers handle them. A 404 response for an image shows the browser's broken-image icon, causes a console error, and—if the image is the LCP element—delays Core Web Vitals metrics. Search engines cannot index missing images, affecting image SEO. Monitoring image errors proactively prevents broken experiences from reaching users.
Review image assets, markup, and delivery configuration related to Fix broken images. Flag exact files or components where format choice, sizing, or loading behavior violates the rule, and describe how to confirm the fix in DevTools.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/images/broken-images
test cases passed, vs 18 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.