CtrlK
BlogDocsLog inGet started
Tessl Logo

video-optimization

Use when reviewing <video> elements, background/hero video, or embedded media assets. Check encoded bitrate, resolution relative to the rendered player size, codec/container choice, and whether a poster/thumbnail avoids blocking on the first frame.

67

Quality

81%

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

SKILL.md
Quality
Evals
Security

Quality

Content

78%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 lean, well-structured skill body with clear task sequencing and a properly signaled one-level-deep reference file that carries the implementation details. The main improvement opportunities are an explicit verification loop after fixes and slightly more concrete encoder settings or an inline example command.

Suggestions

Add an explicit validation step after the Fix section (e.g., re-check file size and rendered resolution, and confirm in DevTools' Network/Media panels) to close the feedback loop.

Replace the vague 'reasonable CRF/quality setting' with a concrete starting CRF range or a one-line example ffmpeg command so the fix guidance is copy-paste ready.

Trim the opening paragraph about video being the heaviest page asset — Claude already knows this — or fold it into the Check section as a one-line severity rationale.

DimensionReasoningScore

Conciseness

The body is compact and densely packed: a 4-bullet Quick Reference plus four tight numbered task sections with no padded prose. One introductory sentence ('Unoptimized video is frequently the single heaviest asset on a page...') explains a fact Claude already knows, which keeps it at 4 rather than 5.

4 / 5

Actionability

This is an instruction-only skill and the guidance is actionable with concrete specifics: 'Re-encode to multiple resolutions (e.g. 480p/720p/1080p)', 'VP9 or AV1 in WebM, or HEVC/H.264 in MP4', 'Add a poster attribute', 'Add preload="metadata" (or "none")'. Per the rubric's scoring note, absence of inline code is not penalized when guidance is actionable, but it stays at 4 because details like 'a reasonable CRF/quality setting' remain unspecified and no example command or markup appears in the body.

4 / 5

Workflow Clarity

A clear Check → Fix → Explain → Code Review sequence, with the Check step enumerating five verifications and the Code Review step closing the loop ('describe how to confirm the fix in DevTools' Network and Media panels'). It does not reach 5 because there is no explicit validate-and-retry checkpoint after fixes, and reporting 'grouped by severity' is stated but not operationalized.

4 / 5

Progressive Disclosure

The body is a well-organized overview (Quick Reference plus task sections) that appropriately defers 'full implementation details, code examples, and framework-specific guidance' to references/rule.md — a real file, clearly signaled, and one level deep with no nested references. This matches the score-5 anchor; the structure and navigation are easy to follow.

5 / 5

Total

17

/

20

Passed

Description

83%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 description with an explicit 'Use when...' trigger clause naming concrete scenarios and a clear, specific list of what the skill checks. The main gaps are the missing fix-side actions and a few natural synonyms/extensions that would round out trigger coverage.

DimensionReasoningScore

Specificity

The description lists several concrete check actions — 'Check encoded bitrate, resolution relative to the rendered player size, codec/container choice, and whether a poster/thumbnail avoids blocking on the first frame' — four specific verification actions. It stays at score 4 rather than 5 because coverage is one-sided: it only describes checking, omitting the fix/re-encode actions the skill actually performs, a minor gap in comprehensiveness.

4 / 5

Completeness

Both halves are explicit: 'when' is answered by 'Use when reviewing <video> elements, background/hero video, or embedded media assets' with concrete trigger phrases, and 'what' by the four enumerated checks (bitrate, resolution vs player size, codec/container, poster/thumbnail). This matches the score-5 anchor; score 4 would require the 'when' clause to be less explicit, which it is not.

5 / 5

Trigger Term Quality

Natural trigger phrases like '<video> elements', 'background/hero video' map well to what a user would say when they need this skill. Not score 5 because common variations are missing: no file extensions (.mp4, .webm), no 'video optimization' or 'compress video' phrasing, and 'embedded media assets' is broader than the niche.

4 / 5

Distinctiveness Conflict Risk

Video optimization is a mostly distinct niche with clear triggers (<video> elements, background/hero video). It stops short of 5 because 'embedded media assets' is broad enough to create minor overlap risk with audio/media-embedding or general performance skills.

4 / 5

Total

17

/

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.