Accessibility

Media, motion and flashing

Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion. Use when adding a video or audio player, a background video, an animated hero, a GIF or a ticker, or when asked "does this video need captions".

fe-a11y-mediaevery web project5 rules88 tokens always loaded, 781 tokens when used, 1342 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-a11y-media lands for Claude Code

.claude/skills/fe-a11y-media/SKILL.mdskill
.claude/skills/fe-a11y-media/references/media.mdskill
.claude/rules/fe-a11y-media.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-a11y-media.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
  - "**/*.css"
  - "**/*.scss"
---

# Media, motion and flashing (frontend-skills)

Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion. Use when adding a video or audio player, a background video, an animated hero, a GIF or a ticker, or when asked "does this video need captions".

- Recorded video with speech has captions: `<track kind="captions" src="….vtt" srclang default>` (a11y/video-captions).
- Recorded audio has a transcript next to it; video has audio description or a full text alternative (a11y/media-alternative).
- Nothing plays sound by itself; an autoplaying video is `muted` and `playsinline` (a11y/no-autoplay-audio).
- Anything that moves, loops or auto-updates for over 5 seconds has a visible pause control (a11y/pause-auto-motion).
- Nothing flashes more than three times a second (a11y/no-flash).
- Players show native `controls` or a custom control bar of real `<button>`s with names and states.
- Start non-essential motion only inside `@media (prefers-reduced-motion: no-preference)`.
- Never `<marquee>` or `<blink>`; never an animated GIF longer than 5 seconds without a way to stop it.

Before larger changes, read the full skill: `.claude/skills/fe-a11y-media/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-media lands for OpenAI Codex

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-media lands for Cursor

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
.cursor/rules/fe-a11y-media.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-a11y-media.mdc

---
description: Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion. Use when adding a video or audio player, a background video, an animated hero, a GIF or a ticker, or when asked "does this video need captions".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html, **/*.css, **/*.scss
alwaysApply: false
---

# Media, motion and flashing (frontend-skills)

- Recorded video with speech has captions: `<track kind="captions" src="….vtt" srclang default>` (a11y/video-captions).
- Recorded audio has a transcript next to it; video has audio description or a full text alternative (a11y/media-alternative).
- Nothing plays sound by itself; an autoplaying video is `muted` and `playsinline` (a11y/no-autoplay-audio).
- Anything that moves, loops or auto-updates for over 5 seconds has a visible pause control (a11y/pause-auto-motion).
- Nothing flashes more than three times a second (a11y/no-flash).
- Players show native `controls` or a custom control bar of real `<button>`s with names and states.
- Start non-essential motion only inside `@media (prefers-reduced-motion: no-preference)`.
- Never `<marquee>` or `<blink>`; never an animated GIF longer than 5 seconds without a way to stop it.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-media/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-media lands for GitHub Copilot

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
.github/instructions/fe-a11y-media.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-a11y-media.instructions.md

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss"
description: "Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion. Use when adding a video or audio player, a background video, an animated hero, a GIF or a ticker, or when asked \"does this video need captions\"."
---

# Media, motion and flashing (frontend-skills)

- Recorded video with speech has captions: `<track kind="captions" src="….vtt" srclang default>` (a11y/video-captions).
- Recorded audio has a transcript next to it; video has audio description or a full text alternative (a11y/media-alternative).
- Nothing plays sound by itself; an autoplaying video is `muted` and `playsinline` (a11y/no-autoplay-audio).
- Anything that moves, loops or auto-updates for over 5 seconds has a visible pause control (a11y/pause-auto-motion).
- Nothing flashes more than three times a second (a11y/no-flash).
- Players show native `controls` or a custom control bar of real `<button>`s with names and states.
- Start non-essential motion only inside `@media (prefers-reduced-motion: no-preference)`.
- Never `<marquee>` or `<blink>`; never an animated GIF longer than 5 seconds without a way to stop it.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-media/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-media lands for Gemini CLI

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-media lands for Antigravity CLI

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
.agents/rules/fe-a11y-media.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-a11y-media.md

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html, **/*.css, **/*.scss"
description: "Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion. Use when adding a video or audio player, a background video, an animated hero, a GIF or a ticker, or when asked \"does this video need captions\"."
---

# Media, motion and flashing (frontend-skills)

- Recorded video with speech has captions: `<track kind="captions" src="….vtt" srclang default>` (a11y/video-captions).
- Recorded audio has a transcript next to it; video has audio description or a full text alternative (a11y/media-alternative).
- Nothing plays sound by itself; an autoplaying video is `muted` and `playsinline` (a11y/no-autoplay-audio).
- Anything that moves, loops or auto-updates for over 5 seconds has a visible pause control (a11y/pause-auto-motion).
- Nothing flashes more than three times a second (a11y/no-flash).
- Players show native `controls` or a custom control bar of real `<button>`s with names and states.
- Start non-essential motion only inside `@media (prefers-reduced-motion: no-preference)`.
- Never `<marquee>` or `<blink>`; never an animated GIF longer than 5 seconds without a way to stop it.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-media/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-media lands for Devin / Windsurf

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
.devin/rules/fe-a11y-media.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-a11y-media.md

---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss"
---

# Media, motion and flashing (frontend-skills)

Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion. Use when adding a video or audio player, a background video, an animated hero, a GIF or a ticker, or when asked "does this video need captions".

- Recorded video with speech has captions: `<track kind="captions" src="….vtt" srclang default>` (a11y/video-captions).
- Recorded audio has a transcript next to it; video has audio description or a full text alternative (a11y/media-alternative).
- Nothing plays sound by itself; an autoplaying video is `muted` and `playsinline` (a11y/no-autoplay-audio).
- Anything that moves, loops or auto-updates for over 5 seconds has a visible pause control (a11y/pause-auto-motion).
- Nothing flashes more than three times a second (a11y/no-flash).
- Players show native `controls` or a custom control bar of real `<button>`s with names and states.
- Start non-essential motion only inside `@media (prefers-reduced-motion: no-preference)`.
- Never `<marquee>` or `<blink>`; never an animated GIF longer than 5 seconds without a way to stop it.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-media/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-media lands for OpenCode

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-media lands for Cline

.claude/skills/fe-a11y-media/SKILL.mdskill
.claude/skills/fe-a11y-media/references/media.mdskill
.clinerules/fe-a11y-media.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-a11y-media.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
  - "**/*.css"
  - "**/*.scss"
---

# Media, motion and flashing (frontend-skills)

Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion. Use when adding a video or audio player, a background video, an animated hero, a GIF or a ticker, or when asked "does this video need captions".

- Recorded video with speech has captions: `<track kind="captions" src="….vtt" srclang default>` (a11y/video-captions).
- Recorded audio has a transcript next to it; video has audio description or a full text alternative (a11y/media-alternative).
- Nothing plays sound by itself; an autoplaying video is `muted` and `playsinline` (a11y/no-autoplay-audio).
- Anything that moves, loops or auto-updates for over 5 seconds has a visible pause control (a11y/pause-auto-motion).
- Nothing flashes more than three times a second (a11y/no-flash).
- Players show native `controls` or a custom control bar of real `<button>`s with names and states.
- Start non-essential motion only inside `@media (prefers-reduced-motion: no-preference)`.
- Never `<marquee>` or `<blink>`; never an animated GIF longer than 5 seconds without a way to stop it.

Before larger changes, read the full skill: `.claude/skills/fe-a11y-media/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-media lands for Zed

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-media lands for JetBrains Junie

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-media lands for Kiro

.kiro/skills/fe-a11y-media/SKILL.mdskill
.kiro/skills/fe-a11y-media/references/media.mdskill
.kiro/steering/fe-a11y-media.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-a11y-media.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html", "**/*.css", "**/*.scss"]
---

# Media, motion and flashing (frontend-skills)

Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion. Use when adding a video or audio player, a background video, an animated hero, a GIF or a ticker, or when asked "does this video need captions".

- Recorded video with speech has captions: `<track kind="captions" src="….vtt" srclang default>` (a11y/video-captions).
- Recorded audio has a transcript next to it; video has audio description or a full text alternative (a11y/media-alternative).
- Nothing plays sound by itself; an autoplaying video is `muted` and `playsinline` (a11y/no-autoplay-audio).
- Anything that moves, loops or auto-updates for over 5 seconds has a visible pause control (a11y/pause-auto-motion).
- Nothing flashes more than three times a second (a11y/no-flash).
- Players show native `controls` or a custom control bar of real `<button>`s with names and states.
- Start non-essential motion only inside `@media (prefers-reduced-motion: no-preference)`.
- Never `<marquee>` or `<blink>`; never an animated GIF longer than 5 seconds without a way to stop it.

Before larger changes, read the full skill: `.kiro/skills/fe-a11y-media/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-media lands for Augment

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-media lands for Trae

.trae/skills/fe-a11y-media/SKILL.mdskill
.trae/skills/fe-a11y-media/references/media.mdskill
.trae/rules/fe-a11y-media.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-a11y-media.md

---
description: "Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion. Use when adding a video or audio player, a background video, an animated hero, a GIF or a ticker, or when asked \"does this video need captions\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss
alwaysApply: false
---

# Media, motion and flashing (frontend-skills)

- Recorded video with speech has captions: `<track kind="captions" src="….vtt" srclang default>` (a11y/video-captions).
- Recorded audio has a transcript next to it; video has audio description or a full text alternative (a11y/media-alternative).
- Nothing plays sound by itself; an autoplaying video is `muted` and `playsinline` (a11y/no-autoplay-audio).
- Anything that moves, loops or auto-updates for over 5 seconds has a visible pause control (a11y/pause-auto-motion).
- Nothing flashes more than three times a second (a11y/no-flash).
- Players show native `controls` or a custom control bar of real `<button>`s with names and states.
- Start non-essential motion only inside `@media (prefers-reduced-motion: no-preference)`.
- Never `<marquee>` or `<blink>`; never an animated GIF longer than 5 seconds without a way to stop it.

Before larger changes, read the full skill: `.trae/skills/fe-a11y-media/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-media lands for Continue

.frontend-skills/skills/fe-a11y-media/SKILL.mdskill
.frontend-skills/skills/fe-a11y-media/references/media.mdskill
.continue/rules/fe-a11y-media.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-a11y-media.md

---
name: "Media, motion and flashing"
description: "Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion. Use when adding a video or audio player, a background video, an animated hero, a GIF or a ticker, or when asked \"does this video need captions\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html", "**/*.css", "**/*.scss"]
alwaysApply: false
---

# Media, motion and flashing (frontend-skills)

- Recorded video with speech has captions: `<track kind="captions" src="….vtt" srclang default>` (a11y/video-captions).
- Recorded audio has a transcript next to it; video has audio description or a full text alternative (a11y/media-alternative).
- Nothing plays sound by itself; an autoplaying video is `muted` and `playsinline` (a11y/no-autoplay-audio).
- Anything that moves, loops or auto-updates for over 5 seconds has a visible pause control (a11y/pause-auto-motion).
- Nothing flashes more than three times a second (a11y/no-flash).
- Players show native `controls` or a custom control bar of real `<button>`s with names and states.
- Start non-essential motion only inside `@media (prefers-reduced-motion: no-preference)`.
- Never `<marquee>` or `<blink>`; never an animated GIF longer than 5 seconds without a way to stop it.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-a11y-media/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-media lands for Amazon Q Developer

.frontend-skills/skills/fe-a11y-media/SKILL.mdskill
.frontend-skills/skills/fe-a11y-media/references/media.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-a11y-media` (Media, motion and flashing): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, `**/*.css`, `**/*.scss`, first read `.frontend-skills/skills/fe-a11y-media/SKILL.md`.

The real file

Where fe-a11y-media lands for Aider

.frontend-skills/skills/fe-a11y-media/SKILL.mdskill
.frontend-skills/skills/fe-a11y-media/references/media.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-a11y-media` (Media, motion and flashing): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, `**/*.css`, `**/*.scss`, first read `.frontend-skills/skills/fe-a11y-media/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

Phrases from the skill description that make the agent pick it:

does this video need captions

And to check and fix the work:

Use the fe-a11y-media skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain a11y/video-captions and fix it here.

Rules it teaches

a11y/video-captions
Recorded video with speech or meaningful sound has synchronised captions, for example a <track kind="captions">.
criticalstaticWCAG 1.2.2
a11y/media-alternative
Recorded audio has a transcript; recorded video has audio description of what is only shown, or a full text alternative.
seriousmanualWCAG 1.2.1, 1.2.3, 1.2.5
a11y/no-autoplay-audio
No audio plays automatically; autoplaying video is muted, and any sound longer than 3 seconds can be paused or stopped.
moderatestaticWCAG 1.4.2
a11y/pause-auto-motion
Anything that moves, blinks, scrolls or updates by itself for more than 5 seconds has a visible pause or stop control.
seriousmanualWCAG 2.2.2
a11y/no-flash
Nothing flashes more than three times in any one second, unless the flash is small and below the general and red thresholds.
criticalmanualWCAG 2.3.1

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Recorded video with speech has captions: <track kind="captions" src="….vtt" srclang default> (a11y/video-captions).
Recorded audio has a transcript next to it; video has audio description or a full text alternative (a11y/media-alternative).
Nothing plays sound by itself; an autoplaying video is muted and playsinline (a11y/no-autoplay-audio).
Anything that moves, loops or auto-updates for over 5 seconds has a visible pause control (a11y/pause-auto-motion).
Nothing flashes more than three times a second (a11y/no-flash).
Players show native controls or a custom control bar of real <button>s with names and states.
Start non-essential motion only inside @media (prefers-reduced-motion: no-preference).
Never <marquee> or <blink>; never an animated GIF longer than 5 seconds without a way to stop it.

Steps the agent follows

Find the player: a native <video>, a library (Video.js, Plyr, Vidstack), or an embed (YouTube, Vimeo). Check that captions and keyboard controls are switched on in its configuration.
Store captions as WebVTT beside the media file; name it <file>.<lang>.vtt; add one <track> per language.
Put the transcript link right under the player, as HTML.
For background video: autoplay muted loop playsinline, a pause button, and no autoplay under reduced motion.
Replace large GIFs with <video autoplay muted loop playsinline> plus a pause control (smaller files and pausable).

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed finds videos without a captions track and media that autoplays with sound.
By hand: play with sound off (captions readable and in sync), with the screen off (transcript or description is enough), with the keyboard only, and with reduced motion turned on in the OS.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/media.md1342 tokens

SKILL.md on GitHub