CtrlK
BlogDocsLog inGet started
Tessl Logo

autoplay-media

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autoplaying media. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

56

Quality

63%

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/autoplay-media/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

63%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, appropriately short overview with excellent progressive disclosure to a real references/rule.md containing the code examples. Its weaknesses are redundancy between the intro, Quick Reference, and Explain sections, and actionability gaps — no inline markup example or named verification tooling, leaving the Check/Fix guidance concrete but not fully executable on its own.

Suggestions

Merge the Explain section and the overlapping Quick Reference bullets into Check/Fix to remove the near-verbatim restatement of the intro.

Inline one small concrete example, e.g. flag `video[autoplay]:not([muted])` and the corrected `<video controls>` markup, so the fix is executable without opening the reference.

Name specific verification tooling in Check (e.g., axe DevTools, Lighthouse, or tabbing through the first few stops) instead of the vague 'browser accessibility tooling or assistive tech'.

DimensionReasoningScore

Conciseness

The body is short and mostly lean, but there is real redundancy: the 'Explain' section ("Explain how autoplaying media interferes with screen readers, startles users...") restates the intro paragraph almost verbatim, and the Quick Reference bullets duplicate the Check/Fix content (e.g., the 5-second rule appears twice). This matches 'mostly efficient but includes some unnecessary explanation or could be tightened'.

3 / 5

Actionability

The Fix section gives genuinely concrete direction ("Remove autoplay attributes from media elements... add muted attribute and provide prominent, keyboard-accessible pause controls") and the 5-second stop rule is a concrete criterion. But the body contains no markup examples or selectors (e.g., video[autoplay]:not([muted])), and the Code Review section's "note how to verify the fix with browser accessibility tooling or assistive tech" is vague direction with no named tool or command — some concrete guidance but incomplete, with executable detail deferred to the reference file.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections give a coherent detect/fix/communicate/verify sequence for a single-purpose review task, and verification is mentioned ("confirm media is muted by default and pause controls are immediately accessible via keyboard"). Not a 5 because the verification step names no explicit method or tool, leaving the checkpoint implicit rather than a concrete feedback loop.

4 / 5

Progressive Disclosure

The body is a clear ~30-line overview with well-organized sections, and the single external reference is explicitly and accurately signaled: "For full implementation details, code examples, and framework-specific guidance, see references/rule.md" — the file exists and contains exactly that (HTML/TSX examples, framework guidance), one level deep with easy navigation.

5 / 5

Total

15

/

20

Passed

Description

63%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 has an explicit 'Use when' trigger and a concrete review procedure, but the action list is boilerplate shared across the accessibility skill family rather than tailored to autoplay, and it omits the natural trigger words (audio, video, sound, muted) users would actually say. It is serviceable but sits noticeably below a top-tier description.

Suggestions

Add natural trigger synonyms — audio, video, sound, muted playback — so users' phrasing matches the description.

Replace the generic second sentence with autoplay-specific checks, e.g. 'verify media does not autoplay with sound, is muted by default, and offers a keyboard-accessible pause within 5 seconds'.

Reword the trigger clause so it reads as a natural condition ('when reviewing pages that play audio or video automatically') instead of referencing the rule title.

DimensionReasoningScore

Specificity

The description names several concrete actions — "Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output" — giving a real review procedure, though the actions are generic accessibility checks rather than autoplay-specific ones. Not a 5 because no action is specific to media autoplay (e.g., muted-by-default checks, 5-second stop rule), which the domain implies it covers.

4 / 5

Completeness

Both parts are explicitly present: the 'what' ("Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output") and an explicit 'Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autoplaying media' trigger clause. Not a 5 because the 'when' clause is awkwardly phrased around the rule title and could name more concrete trigger situations.

4 / 5

Trigger Term Quality

"Autoplaying media" is a natural trigger phrase, but the most common words a user would say — "audio", "video", "sound", "muted" — are absent from the description. It has some relevant keywords ("rendered HTML", "keyboard", "screen-reader") yet misses the core synonyms, matching the 'some relevant keywords but missing common variations' anchor.

3 / 5

Distinctiveness Conflict Risk

"Avoid autoplaying media" carves out a niche, but the second sentence is generic boilerplate (native semantics, keyboard behavior, focus flow, accessible names) that would appear verbatim in many sibling accessibility-review skills, creating real overlap risk. Not a 2 because the autoplay trigger phrase does distinguish it from non-media a11y rules.

3 / 5

Total

14

/

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.