CtrlK
BlogDocsLog inGet started
Tessl Logo

error-images

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

53

Quality

60%

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/error-images/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

65%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.

A short, well-structured overview body with excellent progressive disclosure to a single real reference file. Its weaknesses are in the body's own guidance: the Check/Fix/Explain sections are generic one-liners with no code, no inline example of the onerror technique, and no verification steps kept at the top level.

Suggestions

Inline one minimal executable example in the body — e.g. `<img src="product.jpg" onerror="this.src='/placeholder.png'; this.onerror=null;">` — including the onerror=null guard, since the infinite-loop pitfall is the most critical detail and currently only lives in the reference.

Make the Check section specific about what to inspect (onerror handlers or fallback components, fallback src validity, placeholder/skeleton presence, error logging) instead of 'Check if the website handles broken images gracefully'.

Add the verification steps (block image URLs in DevTools Network tab, test invalid URLs, confirm fallback renders) to the body or fold the redundant 'Explain' section into them, which also removes the padding.

DimensionReasoningScore

Conciseness

The ~30-line body is lean with no concept explanations Claude already knows — the Quick Reference bullets carry real information ('Use onerror to replace broken images with fallbacks', 'Consider skeleton loaders', 'Log image errors'). It falls short of anchor 5 because of minor trimmable padding: the intro sentence duplicates the reference file's 'Why It Matters' verbatim, and the 'Explain how proper error handling for images improves user experience' section adds no actionable content.

4 / 5

Actionability

The Quick Reference names concrete techniques (onerror, skeleton loaders, error logging) but the Check and Fix sections are vague direction — 'Check if the website handles broken images gracefully' and 'Implement fallback images or placeholder content' — with no code or specifics in the body. This matches anchor 3 ('some concrete guidance but incomplete; missing key details'), such as the critical onerror=null infinite-loop guard that only appears in the reference file.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections imply a sequence and the Code Review section gestures at verification ('describe how to confirm the fix in DevTools'), but no explicit checkpoints are given in the body and the concrete verification steps (DevTools request blocking, invalid URLs) live only in references/rule.md. This fits anchor 3 ('sequence present but checkpoints missing or implicit') rather than anchor 4.

3 / 5

Progressive Disclosure

The body is a concise, well-sectioned overview that defers all implementation details to a single clearly signaled, one-level-deep reference — 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and that file exists and contains exactly those details (HTML/React/Next.js examples, verification steps). This matches anchor 5 exactly; no inline content belongs in a separate file and navigation is trivial.

5 / 5

Total

15

/

20

Passed

Description

55%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 trigger clause and concrete-sounding actions, but the action list appears copied from a different image rule (size/loading-strategy/above-the-fold) rather than describing error-handling fallbacks. It would both misrepresent the skill and risk triggering sibling image-optimization skills.

Suggestions

Replace the misaligned action list ('Check encoded size, rendered size, loading strategy, and above-the-fold impact') with the skill's actual capabilities, e.g. 'Add onerror fallbacks, placeholder content, and skeleton loaders for broken images, and log image load errors for monitoring.'

Add natural trigger terms users would say, such as 'broken images', 'image fallback', 'placeholder', and 'onerror', to improve trigger term coverage.

Tighten the 'when' clause to the error-handling context (e.g. 'Use when an image fails to load or shows a broken image icon') so it does not compete with image-optimization or lazy-loading skills.

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' — matching the 'several specific actions' anchor. It stays at 4 rather than 5 because the actions mischaracterize this skill: nothing describes the actual error-handling work (fallbacks, onerror, placeholders), so coverage is not comprehensive.

4 / 5

Completeness

An explicit 'Use when...' trigger clause is present, but the 'what' is wrong: 'Check encoded size, rendered size, loading strategy, and above-the-fold impact' describes a different rule (image optimization/sizing), not this skill's graceful error handling. Because the stated capability misaligns with the skill body, the effective 'what' is missing, which matches anchor 3 better than anchor 4.

3 / 5

Trigger Term Quality

It includes some relevant keywords ('image assets', 'markup', 'image loading errors', 'CDN or build transforms') but misses the natural phrases a user would actually say, such as 'broken images', 'image fallback', or 'placeholder'. This fits anchor 3 ('some relevant keywords but missing common variations or synonyms') and not anchor 4, which requires good coverage with only a few natural terms missing.

3 / 5

Distinctiveness Conflict Risk

The phrase 'related to Handle image loading errors gracefully' gives it a niche, but the dominant trigger surface ('encoded size', 'loading strategy', 'above-the-fold impact', 'CDN or build transforms') overlaps heavily with sibling image-optimization and lazy-loading skills, so it could trigger for the wrong skill. This is 'somewhat specific but could still overlap with similar skills' (anchor 3), not anchor 4's 'minor overlap risk'.

3 / 5

Total

13

/

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.