CtrlK
BlogDocsLog inGet started
Tessl Logo

modern-format

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

60

Quality

70%

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/modern-format/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.

The body is well structured and genuinely actionable, with a clean Check/Fix split and excellent progressive disclosure to references/rule.md. It is held back by redundant statistics repeated across Quick Reference and Explain, an Explain section that teaches concepts Claude already knows, and a batch fix workflow with no explicit validation/verification step.

Suggestions

Merge the Quick Reference stats and the Explain section into one place, and cut the motivational intro and browser-support tutorial — Claude already knows WebP/AVIF tradeoffs; keep only the rule-specific numbers and DevTools confirmation guidance.

Add an explicit validation checkpoint after the Fix step (e.g., 'Verify the <picture> element serves WebP/AVIF in the browser Network panel and that the fallback still renders'), since converting and rewriting all images is a batch operation.

Include a copy-paste-ready <picture> markup example (or a concrete Sharp/Squoosh command) in the Fix section to close the gap between described and executable guidance.

DimensionReasoningScore

Conciseness

The Check and Fix sections are dense and instruction-first, but the motivational intro ("Images are typically 50%+ of page weight... These savings compound across every visitor"), the Explain section's tutorial on WebP/AVIF compression and browser support that Claude already knows, and statistics stated twice ("25-35%" and "40-50%" appear in both Quick Reference and Explain) are unnecessary padding that could be merged. This sits between the 2 anchor (several padded sections) and 4 anchor (minor trim only), so 3 fits best.

3 / 5

Actionability

Guidance is concrete and executable in prose: scan targets are enumerated ("Any <img src> pointing to .jpg, .jpeg, or .png", CSS background-image, missing <source> entries), fixes specify quality settings ("WebP at 80% quality using Squoosh or Sharp", "AVIF at 60% quality"), the exact <picture>/<source> structure, the JPEG fallback, and a "@supports (background-image: url('.webp'))" pattern. As an instruction-only skill this is actionable without code, but a copy-paste <picture> markup example or a concrete Sharp command would lift it to 5.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sequence is clear and the steps are numbered with reporting requirements ("file path and line number"), which would rate 4. However, the Fix step is a batch operation across all images and markup, and the workflow contains no explicit validation checkpoint for Claude's own changes — the DevTools confirmation appears only as something to "describe" to the user in the Code Review section — so per the batch-operation cap, workflow clarity cannot exceed 3.

3 / 5

Progressive Disclosure

The ~30-line body is organized into scannable sections (Quick Reference, Check, Fix, Explain, Code Review) and defers detail via a clearly signaled one-level-deep pointer: "For full implementation details, code examples, and framework-specific guidance, see references/rule.md" — a real 189-line file with no nested references. This matches the clear-overview-with-well-signaled-references anchor.

5 / 5

Total

15

/

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: explicit "Use when" trigger, third person, concrete multi-dimensional review scope, and natural domain terms. Its main limitations are a trigger anchored to the rule title rather than natural user phrasings, missing file-extension synonyms, and no mention of the fix/convert actions the body actually covers.

DimensionReasoningScore

Specificity

The description lists several concrete review actions and targets — "reviewing image assets, markup, and CDN or build transforms" and "Check encoded size, rendered size, loading strategy, and above-the-fold impact together" — which is specific and multi-faceted. It falls short of a 5 because it stays at the review level and never names the remediation actions the skill actually performs (convert, rewrap markup), leaving minor coverage gaps.

4 / 5

Completeness

Both what ("reviewing image assets, markup, and CDN or build transforms... Check encoded size, rendered size, loading strategy, and above-the-fold impact") and when ("Use when reviewing...") are present and explicit. Not a 5 because the 'when' clause is anchored to the rule title ("related to Use modern image formats (WebP, AVIF)") rather than concrete user-facing trigger phrases like 'user mentions WebP/AVIF or image formats'.

4 / 5

Trigger Term Quality

Natural terms a user would say are present: "image assets", "markup", "CDN or build transforms", "WebP, AVIF", "above-the-fold". It misses a few common variations and file extensions users actually type (.webp, .avif, .jpg/.png, "image optimization", "page weight"), which keeps it below the comprehensive anchor at 5 but clearly above the 3 anchor's thin keyword coverage.

4 / 5

Distinctiveness Conflict Risk

The WebP/AVIF format-review niche with CDN/build-transform and above-the-fold framing is mostly distinct from sibling image skills. Minor overlap risk remains with closely related image skills (lazy loading, responsive sizing, image CDN configuration) that also trigger on "image assets" and "loading strategy".

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.