Individual skill

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.

skills/video-thumbnail/SKILL.md

Read pinned source

Source commit e8d14d049010e2ce25afcd5e8609dfcbbe63e47e

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Not checked yet
Last checked: Nov 2, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 74,677
Repository last updated: Oct 31, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

frontend Repository topic
front-end-development Repository topic
front-end-developer-tool Repository topic
guidelines Repository topic
checklist Repository topic
reference Repository topic
web-development Repository topic
html Repository topic
css Repository topic
javascript Repository topic
design Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 3,766 bytes
references/rule.mddoc · 3,345 bytes

Read excerpt


# Add thumbnail images to videos

Without a poster image, a `<video>` element displays as a blank black rectangle until the first frame is loaded. This is visually jarring, provides no context about the video content, and can cause layout shift (CLS) if the video dimensions are not specified separately. A good thumbnail image communicates the video topic at a glance, allows users to decide whether to play, and improves the page's visual quality — especially on slow connections where video preloading is delayed.

## Quick Reference

- Add a `poster` attribute to `<video>` elements with a URL to a representative thumbnail image
- The poster image displays before the video loads and while the user decides whether to play
- Poster images improve perceived performance by showing meaningful content before video data arrives
- The poster should accurately represent the video content — deceptive thumbnails violate user trust
- Use an image ratio matching the video's aspect ratio (typically 16:9) and a resolution of at least 1280×720

## Check