CtrlK
BlogDocsLog inGet started
Tessl Logo

image-file-size

Use when auditing the image pipeline, static assets in `public/`, CMS-managed media, or image CDN transforms. Separate file-size problems from dimension mismatches so you can tell whether the issue is compression, format choice, or responsive delivery.

58

Quality

67%

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/image-file-size/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 well-structured, actionable skill body with concrete size thresholds, named tools, and a clean overview-to-reference split. Its weaknesses are an 'Explain' section that spends tokens on performance concepts Claude already knows, and a missing validation loop after the Fix step for what is a batch operation over all image assets.

Suggestions

Trim or remove the 'Explain' section (LCP, page-weight percentages, mobile network speeds are concepts Claude already knows) or move its user-facing talking points into references/rule.md to save tokens in the always-loaded body.

Add a post-fix verification step to the workflow, e.g. 'Re-measure each converted image and confirm it now meets its threshold; if a hero image is still over 400KB, drop WebP quality to 70% or try AVIF and re-check' — this closes the validation gap for a batch operation.

Include one or two copy-paste-ready commands for the named tools (e.g., an oxipng/pngquant and SVGO CLI invocation, or a short sharp script) so the Fix steps are executable as written rather than leaving command selection to the reader.

DimensionReasoningScore

Conciseness

The Check and Fix sections are dense and efficient (concrete thresholds, tools, and quality settings), but the 'Explain' section re-teaches concepts Claude already knows ("Large images also delay Largest Contentful Paint (LCP), the primary Core Web Vitentials metric", mobile network speeds, images being the largest page assets), and the intro pads with conversion-delay statistics. This matches anchor 3 ('mostly efficient but includes some unnecessary explanation'); it is not 4 because the Explain section is substantially dispensable, and not 2 because the operational content is tight and free of library-choice rambling.

3 / 5

Actionability

Guidance is highly concrete: exact thresholds ("under 200KB", "over 400KB", "under 30KB"), named tools (Squoosh, Sharp, ImageOptim, oxipng, pngquant, SVGO), and specific settings ("WebP at 80% quality", "AVIF at 60% quality"). It falls short of anchor 5 because there are no copy-paste-ready commands (e.g., actual CLI invocations for sharp/oxipng/SVGO) — 'run through SVGO' and 'convert using Squoosh, Sharp, or ImageOptim' leave the exact command to the reader; it is well above anchor 3 because nothing is pseudocode or vague.

4 / 5

Workflow Clarity

The sequence Check → Fix → Explain → Code Review is clear and well-ordered, and the Lighthouse check provides partial audit verification. However, this is a batch operation ("Audit all image assets in this project") with destructive-ish transforms (re-encoding images), and there is no post-fix validation loop — no step to re-measure sizes and confirm images now meet the thresholds. Per the judging guideline ('Missing validation/verification steps in workflows involving destructive or batch operations should cap workflow clarity at 3'), the score is capped at 3 even though the sequence itself would merit 4.

3 / 5

Progressive Disclosure

The body is a concise, well-sectioned overview (Quick Reference, Check, Fix, Explain, Code Review) and the implementation detail — verified to exist as `references/rule.md` (158 lines) — is deferred via a clearly signaled, one-level-deep pointer: "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`". This matches anchor 5 (clear overview with well-signaled one-level-deep references, easy navigation); nothing is deeply nested or buried.

5 / 5

Total

15

/

20

Passed

Description

70%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 well-constructed description with an explicit 'Use when...' clause containing concrete, domain-appropriate trigger terms, and a clear niche that distinguishes file-size problems from dimension mismatches. Its main weakness is that the 'what' states only the diagnostic framing rather than the skill's concrete capabilities (flagging oversized images against thresholds, guiding format conversion).

DimensionReasoningScore

Specificity

The description names the domain ("image pipeline, static assets in `public/`, CMS-managed media, or image CDN transforms") and two concrete actions ("auditing" and "Separate file-size problems from dimension mismatches"), but does not enumerate the core capabilities such as flagging oversized photos, applying size thresholds, or converting formats. This matches anchor 3 (domain plus 1-2 concrete actions); it is below anchor 4 because the action list is not 'several specific actions' and above anchor 2 because the actions named are genuinely concrete, not generic.

3 / 5

Completeness

Both parts are present: 'when' is explicit via "Use when auditing the image pipeline, static assets in `public/`, CMS-managed media, or image CDN transforms" with concrete triggers, and 'what' is stated as "Separate file-size problems from dimension mismatches so you can tell whether the issue is compression, format choice, or responsive delivery". It falls short of anchor 5 because the 'what' is framed as a diagnostic distinction rather than directly stating the skill's capability (keeping image file sizes within limits / flagging oversized images); it is above anchor 3 because both what and when are explicitly present.

4 / 5

Trigger Term Quality

Phrases like "auditing the image pipeline", "static assets in `public/`", "CMS-managed media", and "image CDN transforms" are natural terms a frontend developer would say when they need this skill. It is not a 5 because common synonyms such as 'optimize images', 'compress images', 'oversized images', or specific formats (WebP/AVIF) are missing; it is above anchor 3 because keyword coverage is good and domain-appropriate rather than merely 'some relevant keywords'.

4 / 5

Distinctiveness Conflict Risk

The niche (image file-size auditing, explicitly distinguished from dimension mismatches) is clear with distinct, specific triggers. Minor overlap risk remains with closely related image/asset skills (e.g., alt-text or dimension-auditing skills) because 'static assets in `public/`' is a broad trigger that any asset-audit skill could claim. This is anchor 4 ('mostly distinct; minor overlap risk') — not 5 because of that broad static-assets trigger, not 3 because the file-size focus and explicit contrast with dimension mismatches keep it well differentiated.

4 / 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.