Skip to content
Get packs

Avoid Autoplaying Media

Checks and fixes web pages so audio or video does not autoplay and disrupt screen readers and users.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches an AI agent a web accessibility rule: pages should not start audio or video on their own. When asked to review HTML or a UI component, the agent checks for autoplay attributes, confirms that any essential autoplaying video is muted with easy keyboard-accessible pause controls, and explains why this matters for screen reader users, people with cognitive disabilities, and users on slow connections. It can also suggest concrete fixes to the markup.

Great for

  • Front-end developers auditing a page or component for accessibility issues
  • Designers or QA reviewers checking media behavior against an accessibility checklist

Skip it if

  • Projects where autoplay is a legal or contractual requirement and the reviewer needs legal advice rather than a checklist (the skill gives general guidance only)
  • Non-web media workflows such as editing or producing video files, since the skill only covers rendered HTML behaviour

Try asking

  • “Review this HTML page for autoplaying video or audio and tell me how to fix it.”
  • “Check my hero banner component: is the background video muted and does it have a keyboard-accessible pause button?”
  • “Explain to my team why autoplaying audio is an accessibility problem.”
  • “Suggest the markup changes needed to make this autoplay video accessible.”
Step-by-step guide: how to use Avoid Autoplaying MediaInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    autoplay-media.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip autoplay-media.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip autoplay-media.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the rendered markup or component code, not just a description, so the agent can flag exact elements and attributes.
  • Ask the agent to verify the fix with browser accessibility tools or a screen reader, since the skill itself only provides guidance.
  • For detailed framework-specific examples, point the agent to the rule page it references at frontendchecklist.io.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.