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.

52

Quality

57%

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

57%

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-organized and correctly uses a single one-level-deep reference, but it leans on redundant explanatory prose and stops short of giving fully copy-paste-ready examples with explicit verification steps. Tightening the explanation and adding a complete executable example would raise the score.

Suggestions

Replace the prose-heavy intro and "Explain" section with a single complete example: `<video poster='thumbnail.jpg' width='1280' height='720' controls preload='metadata'></video>`.

Add an explicit verification checkpoint after Fix, e.g. "Confirm the poster URL returns 200 (no 404) and that `width`/`height` are set to prevent CLS."

Remove restated basics about what a poster/black-rectangle is; assume Claude's knowledge and keep only the rule-specific guidance.

DimensionReasoningScore

Conciseness

Mostly efficient with clear sections, but the opening paragraph and the "Explain" section restate UX/perceived-performance concepts (e.g. "displays as a blank black rectangle", "visually jarring") that overlap with each other and with what Claude already knows.

2 / 3

Actionability

Provides a concrete snippet (`<video poster='thumbnail.jpg' controls>`) and specific numbers (1280×720, 16:9), but never shows a complete copy-paste-ready `<video>` element combining poster, width, and height, leaving the guidance concrete yet incomplete.

2 / 3

Workflow Clarity

Check and Fix steps are numbered and sequenced, and the Check section includes a verification idea ("the URL resolves to a valid image (no 404s)"), but validation checkpoints are implicit rather than explicit runnable steps, so the sequence lacks clear feedback loops.

2 / 3

Progressive Disclosure

The body is a concise, well-sectioned overview (Quick Reference, Check, Fix, Explain, Code Review) with a clearly signaled one-level-deep pointer to the existing `references/rule.md`, matching the good anchor for clean navigation.

3 / 3

Total

9

/

12

Passed

Description

57%

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 domain-specific and unlikely to conflict, but it is awkwardly phrased and reads more as an explanation of the `poster` attribute than a crisp statement of what the skill does and when to invoke it. The trigger guidance is present but garbled.

Suggestions

Rewrite the opening trigger as a natural user-facing phrase, e.g. "Use when reviewing HTML that contains `<video>` elements to ensure each has a poster (thumbnail) image."

Lead with the concrete action the skill performs (e.g. "Adds and validates `poster` thumbnail images on `<video>` elements") before explaining what the attribute does.

Add common trigger variations such as "thumbnail", "video preview", and "video placeholder" alongside "poster".

DimensionReasoningScore

Specificity

Names a concrete action and domain ("The `poster` attribute specifies the URL of an image to show as a placeholder"), but it describes essentially one action rather than listing multiple specific concrete actions the skill performs.

2 / 3

Completeness

It answers "what" (the poster attribute specifies a placeholder image URL) and includes a "Use when..." clause, but the trigger reads as scope-applicability ("applies to all `<video>` elements") rather than a clear natural user trigger, so "when" is present but weak.

2 / 3

Trigger Term Quality

Includes relevant natural terms ("`<video>` elements", "HTML", "poster", "CLS") but misses common variations such as "thumbnail", "video preview", or "video placeholder", and the opening "Use when applies to all `<video>` elements" is grammatically awkward.

2 / 3

Distinctiveness Conflict Risk

Scoped narrowly to the HTML `<video>` `poster` attribute, giving it a clear niche unlikely to trigger for unrelated skills.

3 / 3

Total

9

/

12

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.

Validation15 / 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.