Dostępność

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-mediakażdego projektu webowego5 regułładowane zawsze: 88 tokenów; przy użyciu: 781 tokenów; w referencjach na żądanie: 1342 tokeny.

Instalacja

init instaluje ten skill, gdy projekt używa: każdego projektu webowego. Wybierz agenta, aby zobaczyć, gdzie trafią jego pliki.

npx github:dawidolko/frontend-skills init

Ten sposób nie był jeszcze testowany. npx i pnpm dlx są przetestowane; jeśli ten zawiedzie, użyj jednego z nich.

Bez --agents polecenie init rozpoznaje agentów po tym, co projekt już ma, a gdy nie znajdzie żadnego, pyta:

Po czym init rozpoznaje każdego z agentów (17)

Agent	Rozpoznawany po
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`

Gdzie trafia fe-a11y-media dla: Claude Code

.claude/skills/fe-a11y-media/SKILL.mdskill
.claude/skills/fe-a11y-media/references/media.mdskill
.claude/rules/fe-a11y-media.mdplik reguł
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: OpenAI Codex

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenAI Codex nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Cursor

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
.cursor/rules/fe-a11y-media.mdcplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: GitHub Copilot

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
.github/instructions/fe-a11y-media.instructions.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Gemini CLI

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
GEMINI.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Antigravity CLI

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
.agents/rules/fe-a11y-media.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Devin / Windsurf

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
.devin/rules/fe-a11y-media.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: OpenCode

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenCode nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Cline

.claude/skills/fe-a11y-media/SKILL.mdskill
.claude/skills/fe-a11y-media/references/media.mdskill
.clinerules/fe-a11y-media.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Zed

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zed nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: JetBrains Junie

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

JetBrains Junie nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Kiro

.kiro/skills/fe-a11y-media/SKILL.mdskill
.kiro/skills/fe-a11y-media/references/media.mdskill
.kiro/steering/fe-a11y-media.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Augment

.agents/skills/fe-a11y-media/SKILL.mdskill
.agents/skills/fe-a11y-media/references/media.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Augment nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Trae

.trae/skills/fe-a11y-media/SKILL.mdskill
.trae/skills/fe-a11y-media/references/media.mdskill
.trae/rules/fe-a11y-media.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Continue

.frontend-skills/skills/fe-a11y-media/SKILL.mdskill
.frontend-skills/skills/fe-a11y-media/references/media.mdskill
.continue/rules/fe-a11y-media.mdplik reguł

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Amazon Q Developer

.frontend-skills/skills/fe-a11y-media/SKILL.mdskill
.frontend-skills/skills/fe-a11y-media/references/media.mdskill
.amazonq/rules/frontend-skills.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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`.

Prawdziwy plik

Gdzie trafia fe-a11y-media dla: Aider

.frontend-skills/skills/fe-a11y-media/SKILL.mdskill
.frontend-skills/skills/fe-a11y-media/references/media.mdskill
CONVENTIONS.mdblok instrukcji
.aider.conf.ymlkonfiguracja

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Aider nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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`.

Prawdziwy plik

Jak go używać

Po instalacji agent sam ładuje skill, gdy zadanie pasuje do jego opisu. Możesz też poprosić o niego własnymi słowami, na przykład:

Frazy z opisu skilla, po których agent go wybiera (po angielsku, jak w skillu):

does this video need captions

A żeby sprawdzić i poprawić pracę:

Użyj skilla fe-a11y-media na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij a11y/video-captions i popraw to tutaj.

Reguły, których uczy

a11y/video-captions
Recorded video with speech or meaningful sound has synchronised captions, for example a <track kind="captions">.
krytycznastatyczneWCAG 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.
poważnaręczneWCAG 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.
umiarkowanastatyczneWCAG 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.
poważnaręczneWCAG 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.
krytycznaręczneWCAG 2.3.1

Skrót reguł

Ta część jest kopiowana do zawężonego pliku reguł każdego agenta, więc musi być zrozumiała sama w sobie:

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.

Kroki, które wykonuje agent

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).

Jak agent sprawdza swoją pracę

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.

Sprawdzane audytem

Testy statyczne tych reguł działają w audit; to prawdziwa sesja na przykładowym projekcie:

Nagranie terminala: audit wypisuje znaleziska według wagi z identyfikatorami reguł i miejscem plik:linia i kończy się błędem od progu serious. — `audit`: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.

Pliki referencyjne

references/media.md1342 tokeny

SKILL.md na GitHubie