Guide · Agent skill
How to use the Avoid Autoplaying Media agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The autoplay-media skill teaches an AI agent one web accessibility rule: pages should not start audio or video on their own. It is useful for front-end developers, designers and QA reviewers who want the agent to check rendered HTML or a UI component against that rule. After working through this guide you will know what the skill does, how to install it, how to ask for a review and how to read the results.
Avoid Autoplaying Mediathedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the autoplay-media skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ inside a project.
- 3Or upload in the Claude apps. Alternatively, upload the skill under Settings → Capabilities → Skills.
- 4Share the code to review. Give the agent the rendered HTML or component source that contains the media element.
- 5Ask for a media autoplay review. Request a check for autoplaying audio or video and for pause controls.
- 6Apply and verify the fixes. Remove autoplay or add muted and accessible pause controls, then verify with browser accessibility tools or assistive technology.
What does the autoplay-media skill make the agent do?
When you ask the agent to review HTML or a UI component, the skill tells it to check for autoplay behaviour. The agent verifies that no audio or video starts on page load. If autoplay is essential, it confirms the media is muted by default and that pause or stop controls are reachable by keyboard within the first few tab stops.
The source explains why this matters: autoplaying audio drowns out screen reader speech, startles users, and wastes bandwidth. The agent can explain the impact for screen reader users, people with cognitive disabilities, users in quiet environments and users on limited bandwidth, and suggest concrete markup fixes.
- Never autoplay audio, because it interferes with screen readers.
- If video must autoplay, make sure it is muted by default.
- Provide pause or stop controls that are immediately accessible.
- Autoplay should stop after 5 seconds or provide a stop mechanism.
How do you install the autoplay-media skill?
Download the ZIP for this skill from this page and unzip it. You can install it for yourself or for a single project.
For a personal install, unzip it into ~/.claude/skills/. For a project install, unzip it into the .claude/skills/ folder inside your project. You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
The package contains two files: SKILL.md, which holds the main instructions, and references/rule.md, which has full implementation details and code examples.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
How do you trigger the skill with a natural request?
You do not need a special command. Ask for a review of rendered HTML, an interactive component or a design-system pattern, and mention media or autoplay. The skill's description covers reviewing rendered HTML, interactive components and design-system patterns related to avoiding autoplaying media.
The skill also asks the agent to check native semantics first, then keyboard behaviour, focus flow, accessible names and screen-reader output where relevant.
- Review this page for autoplaying media and tell me what to fix.
- Check this video player component for autoplay and pause controls.
- Does this hero section start any audio or video on load?
What does a useful review look like?
A good review points to exact elements and the problem with each. The skill asks the agent to flag specific elements, roles, labels, focus behaviour or keyboard interactions that break the rule, and to explain how to verify the fix with browser accessibility tools or assistive technology.
The reference file gives three markup patterns to compare: an autoplay video with audio is marked bad, an autoplaying muted background video is marked acceptable, and a video with user controls and captions is marked best.
<!-- Bad: Autoplay with audio -->
<video autoplay src="video.mp4"></video>
<!-- Acceptable: Autoplay muted (background video) -->
<video autoplay muted loop playsinline src="hero-bg.mp4"></video>
<!-- Best: No autoplay, user controls -->
<video controls src="video.mp4">
<track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>What does the skill need, and does it run code?
The skill lists no requirements. It does not run scripts and does not use the network, so it only reads the code and content you give the agent. Its scope is rendered HTML behaviour. It does not cover editing or producing video files.
Because it is guidance rather than a tool, the review depends on what you show the agent. Give it the rendered markup or the component source, not only a description.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
What tips help get better results?
Give the agent the full component, including any wrapper that sets autoplay, because autoplay is often added in JavaScript rather than in the HTML. Ask it to verify fixes with browser accessibility tooling or a screen reader rather than accepting the markup change alone.
If a page has several media elements, ask the agent to consider a single global pause control, as the skill's fix guidance suggests.
- Include JavaScript that calls play() on load, not just the HTML.
- Ask for keyboard tab order checks, not only attribute checks.
- Treat the output as general guidance for a checklist, not legal advice.
What people use it for
- Auditing a landing page hero video for autoplay with sound.
- Checking a custom video player component for keyboard-accessible pause controls.
- Reviewing a design-system carousel or media block for autoplay behaviour before release.
- Briefing a QA reviewer with an accessibility checklist item for media behaviour.
Frequently asked questions
How do I install the autoplay-media skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does the autoplay-media skill need anything else installed?
The skill lists no requirements. It does not run scripts and does not use the network.
Is the autoplay-media skill free?
The skill is published under the MIT licence. Check the licence file in the source repository for the full terms.
Can I autoplay a video if it is muted?
The reference file treats an autoplaying muted background video as acceptable. The skill still advises pause or stop controls and a stop mechanism for autoplaying media.
Does the skill fix my code automatically?
It suggests concrete fixes to the markup, such as removing autoplay attributes or adding muted and keyboard-accessible pause controls. You still apply and test the changes yourself.
Can the skill replace a full accessibility audit?
No. It is a checklist-focused guide that covers only autoplaying media in rendered HTML. For legal or contractual questions, get professional advice.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer, designer or QA reviewer who wants an agent to check pages and components for autoplaying media against an accessibility rule. Pick something else if you need video editing or production help, or legal advice about autoplay requirements, since this skill only covers rendered HTML behaviour and gives general guidance.
Download the skill