CtrlK
BlogDocsLog inGet started
Tessl Logo

avif-format

Use when reviewing image assets, markup, and CDN or build transforms related to Use AVIF format for modern browsers. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.

57

Quality

66%

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/avif-format/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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 body is well structured as an overview with an excellent one-level pointer to references/rule.md, and it stays lean. However, it repeats the same compression statistics three times, and the Check/Fix sections give only vague direction with no concrete check method, command, or verification step.

Suggestions

Make the Check section concrete: specify how to verify AVIF support, e.g. inspect markup for a <picture> element with <source type="image/avif"> or filter DevTools Network requests by image/avif, rather than just 'Check if the website supports AVIF format'.

Remove the triplicated '50% better compression than JPEG' statistic — state it once in the intro and delete the redundant Quick Reference bullet and Explain section, or replace them with distinct actionable content (e.g., an avifenc encoding command or build-tool config snippet).

Add a verification checkpoint to the workflow: after flagging/fixing, confirm the fallback chain renders correctly (AVIF on Chrome/Safari 16+, JPEG on legacy) via DevTools device emulation or a disabled-codec run, so the check → fix → verify loop is explicit.

DimensionReasoningScore

Conciseness

The body is short but internally redundant and restates facts Claude already knows: the '50% smaller/better than JPEG' compression statistic appears three times (intro paragraph, Quick Reference bullet, and the Explain section), and the Check section repeats 'even better compression than WebP'. Fits anchor 3 ('mostly efficient but includes some unnecessary explanation or could be tightened') — not score 4 because the Quick Reference and Check/Explain sections are largely filler duplicating the intro; not score 2 because the overall length is still lean with no concept tutorials.

3 / 5

Actionability

There is some concrete guidance — 'Use picture element with WebP and JPEG fallbacks', the browser support list, and the Code Review section's instruction to 'Flag exact files or components where format choice, sizing, or loading behavior violates the rule' — but no executable code, command (e.g., avifenc/cwebp), DevTools procedure, or markup in the body; the actionable code lives entirely in references/rule.md. Matches anchor 3 (some concrete guidance, missing key details); below score 4 because 'Implement AVIF support with proper fallbacks' is a high-level instruction without the specific steps, above score 2 because the picture-element fallback mechanism is named concretely.

3 / 5

Workflow Clarity

A rough sequence exists (Check → Fix → Explain → Code Review), but checkpoints are absent: 'Check if the website supports AVIF format' gives no method (no DevTools Network-panel procedure, no markup inspection step), and there is no validation step to confirm the fallback works. Fits anchor 3 ('steps listed but validation gaps; checkpoints missing or implicit'); not score 4+ because the check/verify method is never specified, though the single-topic structure keeps it above score 2.

3 / 5

Progressive Disclosure

The body is a concise overview (~30 lines) and the details are cleanly split into one clearly signaled, one-level-deep reference: 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and references/rule.md is a real 211-line file containing the picture-element code example. This matches the score 5 anchor (clear overview with well-signaled one-level-deep references, content appropriately split, easy navigation); a lower score would require buried or nested references or inlined detail content, which is not the case.

5 / 5

Total

14

/

20

Passed

Description

75%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 solid description with an explicit 'Use when' trigger, concrete review dimensions (encoded/rendered size, loading strategy, above-the-fold impact), and a distinct AVIF-focused niche. Its main weaknesses are a templated, awkward trigger tail ('related to Use AVIF format for modern browsers') and missing natural synonyms like WebP, fallbacks, or picture element.

DimensionReasoningScore

Specificity

The description lists several concrete actions — 'reviewing image assets, markup, and CDN or build transforms' and 'Check encoded size, rendered size, loading strategy, and above-the-fold impact together' — naming specific review dimensions. It stops short of score 5 because it never states what the skill produces or does beyond reviewing/checking (e.g., flagging, fixing, reporting), and the templated tail 'related to Use AVIF format for modern browsers' adds no concrete action; it is above score 3 because more than 1-2 specific actions with named scope are present.

4 / 5

Completeness

Both parts are present: an explicit 'Use when reviewing image assets, markup, and CDN or build transforms...' trigger clause, and a 'what' in 'Check encoded size, rendered size, loading strategy, and above-the-fold impact together'. Not score 5 because the 'when' clause is templated and awkward ('related to Use AVIF format for modern browsers') rather than a clean concrete trigger phrase, and the 'what' describes checking dimensions but not the underlying capability (AVIF adoption review/fallback implementation); it is above score 3 because both what and when are explicitly stated, not implied.

4 / 5

Trigger Term Quality

Natural terms users would say are present: 'AVIF', 'image assets', 'markup', 'CDN or build transforms', 'loading strategy'. Not score 5 because common variations and synonyms are missing — 'WebP', 'image format', 'fallbacks', 'picture element', 'image optimization' — and the awkward duplicated title phrase 'related to Use AVIF format for modern browsers' is not a natural user utterance; it is above score 3 because the key terms (AVIF, image assets, CDN/build transforms) are ones a user would plausibly say verbatim.

4 / 5

Distinctiveness Conflict Risk

The AVIF-specific focus ('Use AVIF format for modern browsers', 'image assets', 'CDN or build transforms') creates a clear niche with minimal conflict risk against unrelated skills. Not score 5 because the general framing 'reviewing image assets, markup, and loading strategy' could also overlap with closely related image skills such as responsive-images, lazy-loading, or WebP-format skills; it is well above score 3 since the AVIF anchor term makes mis-triggering unlikely.

4 / 5

Total

16

/

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.