CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

60

Quality

71%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/broken-images/SKILL.md
SKILL.md
Quality
Evals
Security

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 content is a well-structured, appropriately split skill: the body stays at overview altitude, operational guidance is concrete (inline onerror handler, per-scenario fixes, DevTools verification), and all code examples are correctly pushed one level deep into a real references/rule.md. The main weaknesses are the intro paragraph duplicated almost verbatim in the Explain section and the absence of an explicit re-validate step closing the Check→Fix loop.

Suggestions

Remove the duplicated UX rationale: the intro paragraph and the Explain section say nearly the same thing — keep one, and let the 'why' detail live in references/rule.md's 'Why It Matters' section.

Close the workflow loop with an explicit re-validation step after Fix, e.g., 'Re-run the build-time check / DevTools scan and confirm zero broken images before finishing'.

Add one executable detection snippet to the Check section (e.g., the document.querySelectorAll('img').filter(img => !img.complete) one-liner from rule.md) so the scan step is runnable directly from the body.

DimensionReasoningScore

Conciseness

The Check/Fix sections are tight and imperative, but the opening paragraph ("A broken image shows an ugly placeholder icon, breaks visual layouts, and communicates that the site is poorly maintained...") is re-explained nearly verbatim in the Explain section, duplicating UX rationale Claude already knows. This matches the score-3 anchor (mostly efficient with some unnecessary explanation that could be tightened); it is not 2 because the operational sections carry no padding, and not 4 because the intro/Explain duplication is a full redundant section rather than a minor trim.

3 / 5

Actionability

The Fix section gives a copy-paste-ready handler — onerror="this.src='/images/fallback.png'; this.onerror=null;" — plus concrete numbered remedies per scenario (wrong path, missing asset, framework onError callback, self-hosting external images), and Quick Reference names a concrete verification method (DevTools Network tab, blocked requests). This fits the score-4 anchor (mostly executable guidance with minor gaps); not 5 because detection code and the CI check live only in the reference file, so the body alone is not fully self-sufficient for execution.

4 / 5

Workflow Clarity

The body sequences Check (scan and identify broken images with numbered categories) → Fix (numbered remediation) → verify ("Test with DevTools Network tab blocked requests to verify fallback behaviour"), a clear sequence with an explicit validation checkpoint matching the score-4 anchor. Not 5 because there is no explicit re-check loop after fixing (e.g., re-run the scan/build check to confirm zero broken images), which the score-5 anchor's feedback-loop pattern expects.

4 / 5

Progressive Disclosure

The 45-line body is well-organized into Quick Reference / Check / Fix / Explain / Code Review sections and ends with a clearly signaled, one-level-deep pointer — "For full implementation details, code examples, and framework-specific guidance, see references/rule.md" — which resolves to a real file containing the code examples, framework guidance, and verification steps. This matches the score-5 anchor (clear overview with well-signaled one-level-deep references, content appropriately split, easy navigation), and the simple-skill note allows 5 for a short, well-organized single-purpose skill.

5 / 5

Total

16

/

20

Passed

Description

71%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 has an explicit 'Use when...' trigger and names concrete checks, but its 'what' clause is mismatched with the skill's actual content: encoded size, loading strategy, and above-the-fold impact belong to image-optimization rules, not broken-image detection and fallback. Rewriting the description around the skill's real actions (validate img src paths at build time, add onerror fallbacks, verify with DevTools) would raise specificity, completeness, and distinctiveness together.

Suggestions

Rewrite the 'what' clause to describe the skill's actual actions: detect broken <img> src and background-image paths, add onerror fallback handlers, and validate paths at build time.

Add distinguishing trigger terms such as '404 images', 'missing images', 'image fallback', and 'onerror' to reduce overlap with sibling image-optimization skills (encoded size, loading strategy, above-the-fold are shared vocabulary).

Restructure the 'when' clause so 'Fix broken images' reads as a natural trigger (e.g., "Use when images return 404s, show broken-image icons, or when adding fallback handling") rather than the awkward 'related to Fix broken images'.

DimensionReasoningScore

Specificity

The description lists several concrete actions — "Check encoded size, rendered size, loading strategy, and above-the-fold impact together" and "reviewing image assets, markup, and CDN or build transforms" — which matches the score-4 anchor (several specific actions, minor gaps). It falls short of 5 because the enumerated checks (encoded size, loading strategy, above-the-fold) describe image-optimization concerns rather than the skill's actual broken-image scope (detect 404s, add onerror fallbacks), leaving a coverage gap.

4 / 5

Completeness

Both parts are explicitly present: the 'when' ("Use when reviewing image assets, markup, and CDN or build transforms related to Fix broken images") and the 'what' ("Check encoded size, rendered size, loading strategy, and above-the-fold impact together"), matching the score-4 anchor. Not 5 because the 'what' clause does not actually describe what the skill body does — it reads like generic image-optimization copy-pasted from a sibling rule — and the 'when' phrasing ('related to Fix broken images') is awkward rather than a crisp trigger phrase.

4 / 5

Trigger Term Quality

Natural terms a user would say are present — "broken images", "image assets", "markup", "CDN", "build transforms" — giving good keyword coverage per the score-4 anchor. It misses common variations like "404 images", "missing images", "image fallback", or "onerror" that would warrant a 5.

4 / 5

Distinctiveness Conflict Risk

The trigger "reviewing image assets, markup, and CDN or build transforms" plus checks like "encoded size, rendered size, loading strategy, above-the-fold impact" overlap heavily with image-optimization skills (next-gen formats, lazy loading, responsive images), fitting the score-3 anchor (somewhat specific but can still overlap with similar skills). The "broken images" phrase provides some niche, so it is above 2, but a description this generic about image/CDN review would fire for the wrong image skills too often to score 4.

3 / 5

Total

15

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
Reviewed

Table of Contents

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.