CtrlK
BlogDocsLog inGet started
Tessl Logo

image-optimization

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

68

Quality

83%

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

SKILL.md
Quality
Evals
Security

Quality

Content

78%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 well-structured overview body: concrete thresholds, a clear Check→Fix→Explain sequence, and correct deferral of code examples to a real one-level-deep reference file. The main shortfalls are the absence of any executable command (e.g., a WebP/AVIF conversion CLI) and no explicit re-check loop after fixes.

Suggestions

Add one concrete conversion command (e.g., a cwebp/avifenc invocation with the 80%/60% quality flags) or a corrected <picture>+srcset snippet in the Fix section so guidance is copy-paste ready.

Close the loop after fixes with an explicit re-check step ('re-run the Check pass and confirm encoded size and layout shift in DevTools before reporting done').

Trim the Quick Reference bullets that duplicate Check/Fix items, and drop the opening page-weight sentence already repeated verbatim in references/rule.md.

DimensionReasoningScore

Conciseness

The body is efficient — numbered Check/Fix steps carry concrete thresholds ("< 200KB for photos, < 50KB for graphics", "> 100px wide", "400w, 800w, 1200w, 1600w variants") with no explanations of concepts Claude doesn't know. Minor trim opportunities remain: the Quick Reference bullets duplicate Check/Fix items, and the opening motivation sentence is repeated verbatim in references/rule.md, so anchor 4 fits better than 5's 'every token earns its place'.

4 / 5

Actionability

Guidance is specific and executable in direction — exact size/quality thresholds, srcset variant widths, and per-issue fix steps — but the body contains no runnable commands or code: "Convert JPEG/PNG photos to WebP" lacks a conversion command, and the example markup lives only in references/rule.md. This matches anchor 4 ('mostly executable... minor gaps'); anchor 5 requires copy-paste-ready code or commands in the body itself.

4 / 5

Workflow Clarity

A clear phased sequence (Check → Fix → Explain) with the Check phase serving as per-image validation ("Report issues grouped by severity with file paths") and post-fix verification guidance ("describe how to confirm the fix in DevTools"). The gap is that there is no explicit re-run/re-check loop after applying fixes, so anchor 4 fits rather than 5; the batch scan does include verification steps, so the batch-operation cap of 3 does not apply.

4 / 5

Progressive Disclosure

A lean ~45-line overview body with a single, clearly signaled, one-level-deep reference: "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`" — verified to exist and to contain the deferred code examples and format comparison table. This matches anchor 5's clear overview with well-signaled one-level-deep references and easy navigation.

5 / 5

Total

17

/

20

Passed

Description

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

A strong description with an explicit, specific 'Use when' trigger and a concrete multi-dimension checking mandate. Its main weakness is trigger vocabulary: users asking to "compress images", add "lazy loading", or convert to "WebP/AVIF" would not naturally match the phrasing used.

Suggestions

Add natural user-facing trigger terms to the description such as 'WebP', 'AVIF', 'srcset', 'lazy loading', and 'compress images' so common phrasings match without relying on 'image assets' and 'markup'.

Mention the fix and explain capabilities (e.g., 'converts photos to WebP/AVIF with responsive markup and explains Core Web Vitals impact') so the 'what' covers what the skill body actually does.

DimensionReasoningScore

Specificity

Concrete actions quoted: "reviewing image assets, markup, and CDN or build transforms" and "Check encoded size, rendered size, loading strategy, and above-the-fold impact together". These list several specific actions with specific objects, but coverage has minor gaps — the skill's fix/explain capabilities are absent and the action verbs effectively reduce to review/check, matching anchor 4 rather than 5's comprehensive multi-verb coverage.

4 / 5

Completeness

Explicitly answers both parts: what — "Check encoded size, rendered size, loading strategy, and above-the-fold impact together"; when — "Use when reviewing image assets, markup, and CDN or build transforms". Both are concrete and explicit, matching anchor 5; anchor 4's example has a vaguer 'when' ("Use when working with PDF files") than this specific trigger phrasing.

5 / 5

Trigger Term Quality

Natural keywords present: "image assets", "markup", "CDN or build transforms", "loading strategy", "above-the-fold". However, common phrases a user would naturally say are missing — "image optimization", "WebP", "AVIF", "srcset", "lazy loading", "compress images" — which fits anchor 4 (good coverage, a few natural terms missing) rather than anchor 5's comprehensive synonym and extension coverage.

4 / 5

Distinctiveness Conflict Risk

Clear niche — web image optimization review — with distinct triggers ("image assets, markup, and CDN or build transforms") that would not fire for unrelated skills. It matches anchor 5's "clear niche with distinct triggers; minimal conflict risk"; it is not anchor 4 because overlap with generic web-performance skills is marginal given the image-specific scope.

5 / 5

Total

18

/

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.