video-thumbnail

Use when applies to all `<video>` elements in HTML. The `poster` attribute specifies the URL of an image to show as a placeholder before the video is loaded or played. This is distinct from captions or audio descriptions, which are accessibility requirements. The poster is primarily a UX and performance enhancement, though the lack of a poster can indirectly create a CLS (Cumulative Layout Shift) issue if video dimensions are not declared.

Quality

55%

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/video-thumbnail/SKILL.md

Quality

Content

71%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 content is well-structured and actionable with a clean Check/Fix workflow and excellent progressive disclosure to a real reference file. Its main weakness is mild verbosity from re-explaining the poster concept Claude already knows.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient with clear Check/Fix lists, but the 'Explain' section re-describes the poster attribute and preload behavior Claude already knows, and Quick Reference/Check/Fix overlap somewhat, so it could be tightened.	3 / 5
Actionability	Check and Fix give concrete, executable guidance such as `<video poster='thumbnail.jpg' controls>` and specific dimensions (1280×720, 640×360), with only minor gaps (no inline code example, which lives in the reference).	4 / 5
Workflow Clarity	The Check→Fix flow is a clear sequence with validation checkpoints (URL resolves with no 404s, dimensions set to prevent CLS, poster represents content), though explicit re-check/retry feedback loops are only implicit in the body.	4 / 5
Progressive Disclosure	The body is a well-organized overview (Quick Reference, Check, Fix, Explain, Code Review) that signals a single one-level-deep reference — `references/rule.md` — which exists and holds the detailed code examples, tables, and verification steps.	5 / 5
	Total	16 / 20 Passed

Description

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

The description is distinctive and on-topic but functionally weak: it explains the poster attribute instead of stating what the skill does, and its 'Use when' trigger clause is malformed. It reads as a concept glossary entry rather than a skill description.

Suggestions

Rewrite the opening as a clear action statement, e.g. 'Adds and verifies poster thumbnail images on `<video>` elements' so the skill's function is explicit.

Fix the 'Use when' trigger into a natural phrase such as 'Use when reviewing HTML video elements for missing or invalid poster images, or when the user mentions video thumbnails/posters and CLS.'

Include the synonym 'thumbnail' alongside 'poster' to improve trigger-term coverage.

Dimension	Reasoning	Score
Specificity	The description names the domain (HTML `<video>`, `poster` attribute) but describes what the attribute does ('specifies the URL of an image to show as a placeholder') rather than listing concrete actions the skill performs such as adding or checking posters, so actions are minimal and generic.	2 / 5
Completeness	The 'what' explains the poster attribute concept rather than the skill's own function, and the 'when' clause ('Use when applies to all `<video>` elements in HTML') is grammatically broken and does not yield a usable trigger, so neither side is clearly satisfied.	2 / 5
Trigger Term Quality	It includes relevant natural terms like 'video', 'poster', 'HTML', and 'CLS (Cumulative Layout Shift)', but omits the common synonym 'thumbnail' that appears in the skill name, leaving coverage incomplete.	3 / 5
Distinctiveness Conflict Risk	The scope is tightly bound to the HTML `<video>` poster attribute and CLS concerns, making it mostly distinct with only minor overlap risk against general HTML/accessibility skills.	4 / 5
	Total	11 / 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/video-thumbnail/SKILL.md
Commit: 30756a7

Reviewed: 4 days 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.