webp-format

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

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/webp-format/SKILL.md

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.

A well-structured, appropriately split overview with excellent progressive disclosure to a real, one-level reference file. The body itself is weakened by triple repetition of the compression stat, baseline WebP facts Claude already knows, and a Fix/Check pair that stays high-level without naming tools or commands.

Suggestions

State the 25-35% compression figure once (in Quick Reference or intro) and delete the redundant repeats in the other sections.

Make the Check and Fix steps concrete: name the inspection method (e.g., Network panel filter by image type, or checking Content-Type headers) and a conversion path (e.g., cwebp, sharp, or the build-tool plugin) inline, deferring only depth to the reference.

Drop the 'Supports transparency (like PNG) and animation (like GIF)' bullet and 'nearly universal' phrasing — Claude already knows WebP's feature set; keep only the 97%+ support figure that informs the fallback decision.

Dimension	Reasoning	Score
Conciseness	The body is brief but the 25-35% compression claim is repeated three times (intro, Quick Reference, Explain), and 'Supports transparency (like PNG) and animation (like GIF)' plus 'nearly universal' explain concepts Claude already knows or add fluff.	3 / 5
Actionability	Some concrete guidance exists ('Use picture element for older browser fallbacks', checking encoded size/rendered size/loading strategy/above-the-fold, DevTools confirmation), but the core Fix ('Convert images to WebP format and implement proper fallback strategies') names no tool, command, or code — all executable detail is deferred to the reference file.	3 / 5
Workflow Clarity	The Check → Fix → Explain → Code Review sequence is present and the DevTools confirmation is an explicit checkpoint, but the Check step provides no method ('Check if images are served in modern formats like WebP' — how?), leaving validation in the main flow implicit.	3 / 5
Progressive Disclosure	The short, sectioned body is a genuine overview with 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 delivers the promised content.	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 strong, third-person description with an explicit 'Use when' trigger and several concrete review actions tied to specific metrics. Its main weaknesses are a 'what' capability statement folded into the trigger clause, an awkwardly embedded rule title, and a few missing natural synonyms.

Suggestions

State the capability up front in third person before the trigger clause (e.g., 'Reviews image format delivery and verifies WebP adoption with fallbacks') so the 'what' is explicit and distinct from the 'when'.

Integrate the rule name more naturally instead of 'related to Use WebP format with fallbacks', which reads as a pasted title.

Add a few natural synonyms users might say, such as 'image optimization', 'page weight', or '.webp files', to broaden trigger coverage.

Dimension	Reasoning	Score
Specificity	Lists several concrete actions ('reviewing image assets, markup, and CDN or build transforms', 'Check encoded size, rendered size, loading strategy, and above-the-fold impact') in a named domain, with minor coverage gaps such as no convert/implement action.	4 / 5
Completeness	Both what and when are present, with an explicit 'Use when reviewing...' trigger and concrete check actions. The 'what' is entangled with the when-clause rather than stated as a standalone capability, and 'related to Use WebP format with fallbacks' reads as an awkward embedded rule title, keeping it below a 5.	4 / 5
Trigger Term Quality	Good natural keyword coverage ('WebP', 'image assets', 'markup', 'CDN', 'build transforms', 'above-the-fold', 'loading strategy') that reviewers would actually say, though synonyms like 'image optimization', 'page weight', or '.webp' are missing.	4 / 5
Distinctiveness Conflict Risk	The WebP-specific trigger with concrete metrics (encoded size, above-the-fold impact) carves a mostly distinct niche, with only minor overlap risk against sibling image-performance rules like lazy loading or responsive images.	4 / 5
	Total	16 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/webp-format/SKILL.md
Commit: 7bfd868

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.