CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

55

Quality

62%

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

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 body is a well-structured, actionable overview with a clean Check/Fix/Explain flow and exemplary one-level progressive disclosure to references/rule.md. Its main weakness is redundancy — Explain and Fix repeat material from the intro and Quick Reference — and the absence of an explicit post-fix verification step.

DimensionReasoningScore

Conciseness

The body is mostly efficient with tight section structure, but there is real redundancy: the "Explain" section restates the intro's black-rectangle and perceived-performance points, and the Fix section repeats the Quick Reference's aspect-ratio and 1280×720 guidance verbatim in substance. This matches 'mostly efficient but includes some unnecessary explanation or could be tightened'; the duplication keeps it below a 4.

3 / 5

Actionability

Concrete, executable guidance dominates: a one-line code snippet (`<video poster='thumbnail.jpg' controls>`), specific numeric recommendations (1280×720 minimum, 640×360 for embeds, 16:9), and four explicit check criteria including URL resolution. Not a 5 because the body contains only a fragment rather than a complete copy-paste example (full examples are deferred to references/rule.md), leaving minor gaps.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review structure is a clear sequence, and the Check section embeds concrete checkpoints (URL resolves, dimensions set, poster representative). Not a 5 because there is no explicit re-validation loop after fixing (e.g., 're-run the checks to confirm'), leaving a minor checkpoint gap; it is clearly above a 3 since the sequence and criteria are well defined.

4 / 5

Progressive Disclosure

The body is a concise overview with clear sections, and it points to a single one-level-deep reference that exists and is clearly signaled: "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`" (verified present in the bundle). Content is appropriately split — full code examples and CLS CSS live in the reference — matching the ideal anchor exactly.

5 / 5

Total

16

/

20

Passed

Description

53%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 communicates a clear niche (the HTML video poster attribute) and even disambiguates it from captions/audio descriptions, but the trigger clause is malformed ("Use when applies to all...") and natural trigger terms like "thumbnail" are absent. It reads as an explanatory rule summary rather than a concise what+when skill description.

Suggestions

Rewrite the trigger clause into a grammatical 'Use when...' sentence, e.g., "Use when adding or reviewing `<video>` elements in HTML, or when the user mentions video thumbnails, posters, or blank/black video placeholders."

Include the natural synonyms users would actually say — "thumbnail", "video preview", "poster image" — since the skill is named video-thumbnail but the description never uses the word "thumbnail".

Lead with a compact third-person statement of what the skill does (check for and add poster attributes) instead of opening with the broken "Use when applies to all" construction followed by attribute documentation.

DimensionReasoningScore

Specificity

The description names the domain ("the `poster` attribute specifies the URL of an image to show as a placeholder before the video is loaded or played") but lists only one concrete behavior; it is descriptive rather than action-listing, matching the 'names domain and 1-2 concrete actions, not comprehensive' anchor. It is not a 2 because it does state a specific concrete behavior, and not a 4 because it never enumerates several actions (check, add, validate).

3 / 5

Completeness

The 'what' is clear (poster attribute = URL of placeholder image), but the 'when' clause is garbled: "Use when applies to all `<video>` elements in HTML" is grammatically broken, leaving the trigger only weakly and confusingly expressed. This fits the 'clear what but when missing or only weakly implied' anchor; the broken clause prevents a 4.

3 / 5

Trigger Term Quality

Relevant keywords are present ("`<video>` elements in HTML", "`poster` attribute", "CLS (Cumulative Layout Shift)") but common natural variations are missing — notably "thumbnail" (the skill's own name), "video preview", or "placeholder image" phrasing users would say. Not a 4 because the natural synonym coverage is incomplete; not a 2 because the terms given are domain-specific and genuinely matchy.

3 / 5

Distinctiveness Conflict Risk

"This is distinct from captions or audio descriptions, which are accessibility requirements" explicitly disambiguates adjacent skills, and the video-poster niche is narrow. Minor overlap risk remains with general video/accessibility or CLS/layout skills, so it does not reach the fully distinct anchor at 5.

4 / 5

Total

13

/

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.