Frontend Skills
Polski

Accessibility

Carousels and toasts

Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target). Use when adding a hero slider, product carousel, testimonial rotator, toast system, snackbar or notification banner, or when asked "is this carousel accessible".

fe-a11y-carousel-toastevery web project5 rules102 tokens always loaded, 791 tokens when used, 1127 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.

Agent
npx github:dawidolko/frontend-skills init

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
AgentFound by
Claude CodeCLAUDE.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 CLIGEMINI.md .gemini
Antigravity CLI.agents/rules .agent/rules
Devin / Windsurf.devin .windsurf .windsurfrules
OpenCodeopencode.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-carousel-toast lands for Claude Code

  • .claude/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .claude/skills/fe-a11y-carousel-toast/references/carousel-toast.mdskill
  • .claude/rules/fe-a11y-carousel-toast.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-carousel-toast.md
---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Carousels and toasts (frontend-skills)

Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target). Use when adding a hero slider, product carousel, testimonial rotator, toast system, snackbar or notification banner, or when asked "is this carousel accessible".

- A carousel has named previous and next buttons, slide labels ("2 of 5") and a container label (a11y/carousel-controls).
- Auto-rotation has a pause button first in the carousel's Tab order and stops on hover and focus (a11y/carousel-controls).
- Anything that moves by itself for more than 5 seconds can be paused (a11y/pause-auto-motion).
- Toasts with actions or needed information stay until closed; others pause on hover and focus (a11y/toast-timing).
- Toasts are announced from one live region that is always in the page (a11y/status-message-live).
- Icon-only arrows, dots and close buttons have names (a11y/control-name).
- Never move focus into a toast; never put the only copy of important information in a toast.
- Respect `prefers-reduced-motion`: no auto-rotation and no slide animation when it is set.

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

Where fe-a11y-carousel-toast lands for OpenAI Codex

  • .agents/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .agents/skills/fe-a11y-carousel-toast/references/carousel-toast.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-carousel-toast lands for Cursor

  • .agents/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .agents/skills/fe-a11y-carousel-toast/references/carousel-toast.mdskill
  • .cursor/rules/fe-a11y-carousel-toast.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-carousel-toast.mdc
---
description: Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target). Use when adding a hero slider, product carousel, testimonial rotator, toast system, snackbar or notification banner, or when asked "is this carousel accessible".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Carousels and toasts (frontend-skills)

- A carousel has named previous and next buttons, slide labels ("2 of 5") and a container label (a11y/carousel-controls).
- Auto-rotation has a pause button first in the carousel's Tab order and stops on hover and focus (a11y/carousel-controls).
- Anything that moves by itself for more than 5 seconds can be paused (a11y/pause-auto-motion).
- Toasts with actions or needed information stay until closed; others pause on hover and focus (a11y/toast-timing).
- Toasts are announced from one live region that is always in the page (a11y/status-message-live).
- Icon-only arrows, dots and close buttons have names (a11y/control-name).
- Never move focus into a toast; never put the only copy of important information in a toast.
- Respect `prefers-reduced-motion`: no auto-rotation and no slide animation when it is set.

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

Where fe-a11y-carousel-toast lands for GitHub Copilot

  • .agents/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .agents/skills/fe-a11y-carousel-toast/references/carousel-toast.mdskill
  • .github/instructions/fe-a11y-carousel-toast.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-carousel-toast.instructions.md
---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target). Use when adding a hero slider, product carousel, testimonial rotator, toast system, snackbar or notification banner, or when asked \"is this carousel accessible\"."
---

# Carousels and toasts (frontend-skills)

- A carousel has named previous and next buttons, slide labels ("2 of 5") and a container label (a11y/carousel-controls).
- Auto-rotation has a pause button first in the carousel's Tab order and stops on hover and focus (a11y/carousel-controls).
- Anything that moves by itself for more than 5 seconds can be paused (a11y/pause-auto-motion).
- Toasts with actions or needed information stay until closed; others pause on hover and focus (a11y/toast-timing).
- Toasts are announced from one live region that is always in the page (a11y/status-message-live).
- Icon-only arrows, dots and close buttons have names (a11y/control-name).
- Never move focus into a toast; never put the only copy of important information in a toast.
- Respect `prefers-reduced-motion`: no auto-rotation and no slide animation when it is set.

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

Where fe-a11y-carousel-toast lands for Gemini CLI

  • .agents/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .agents/skills/fe-a11y-carousel-toast/references/carousel-toast.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-carousel-toast lands for Antigravity CLI

  • .agents/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .agents/skills/fe-a11y-carousel-toast/references/carousel-toast.mdskill
  • .agents/rules/fe-a11y-carousel-toast.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-carousel-toast.md
---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target). Use when adding a hero slider, product carousel, testimonial rotator, toast system, snackbar or notification banner, or when asked \"is this carousel accessible\"."
---

# Carousels and toasts (frontend-skills)

- A carousel has named previous and next buttons, slide labels ("2 of 5") and a container label (a11y/carousel-controls).
- Auto-rotation has a pause button first in the carousel's Tab order and stops on hover and focus (a11y/carousel-controls).
- Anything that moves by itself for more than 5 seconds can be paused (a11y/pause-auto-motion).
- Toasts with actions or needed information stay until closed; others pause on hover and focus (a11y/toast-timing).
- Toasts are announced from one live region that is always in the page (a11y/status-message-live).
- Icon-only arrows, dots and close buttons have names (a11y/control-name).
- Never move focus into a toast; never put the only copy of important information in a toast.
- Respect `prefers-reduced-motion`: no auto-rotation and no slide animation when it is set.

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

Where fe-a11y-carousel-toast lands for Devin / Windsurf

  • .agents/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .agents/skills/fe-a11y-carousel-toast/references/carousel-toast.mdskill
  • .devin/rules/fe-a11y-carousel-toast.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-carousel-toast.md
---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
---

# Carousels and toasts (frontend-skills)

Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target). Use when adding a hero slider, product carousel, testimonial rotator, toast system, snackbar or notification banner, or when asked "is this carousel accessible".

- A carousel has named previous and next buttons, slide labels ("2 of 5") and a container label (a11y/carousel-controls).
- Auto-rotation has a pause button first in the carousel's Tab order and stops on hover and focus (a11y/carousel-controls).
- Anything that moves by itself for more than 5 seconds can be paused (a11y/pause-auto-motion).
- Toasts with actions or needed information stay until closed; others pause on hover and focus (a11y/toast-timing).
- Toasts are announced from one live region that is always in the page (a11y/status-message-live).
- Icon-only arrows, dots and close buttons have names (a11y/control-name).
- Never move focus into a toast; never put the only copy of important information in a toast.
- Respect `prefers-reduced-motion`: no auto-rotation and no slide animation when it is set.

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

Where fe-a11y-carousel-toast lands for OpenCode

  • .agents/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .agents/skills/fe-a11y-carousel-toast/references/carousel-toast.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-carousel-toast lands for Cline

  • .claude/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .claude/skills/fe-a11y-carousel-toast/references/carousel-toast.mdskill
  • .clinerules/fe-a11y-carousel-toast.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-carousel-toast.md
---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Carousels and toasts (frontend-skills)

Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target). Use when adding a hero slider, product carousel, testimonial rotator, toast system, snackbar or notification banner, or when asked "is this carousel accessible".

- A carousel has named previous and next buttons, slide labels ("2 of 5") and a container label (a11y/carousel-controls).
- Auto-rotation has a pause button first in the carousel's Tab order and stops on hover and focus (a11y/carousel-controls).
- Anything that moves by itself for more than 5 seconds can be paused (a11y/pause-auto-motion).
- Toasts with actions or needed information stay until closed; others pause on hover and focus (a11y/toast-timing).
- Toasts are announced from one live region that is always in the page (a11y/status-message-live).
- Icon-only arrows, dots and close buttons have names (a11y/control-name).
- Never move focus into a toast; never put the only copy of important information in a toast.
- Respect `prefers-reduced-motion`: no auto-rotation and no slide animation when it is set.

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

Where fe-a11y-carousel-toast lands for Zed

  • .agents/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .agents/skills/fe-a11y-carousel-toast/references/carousel-toast.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-carousel-toast lands for JetBrains Junie

  • .agents/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .agents/skills/fe-a11y-carousel-toast/references/carousel-toast.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-carousel-toast lands for Kiro

  • .kiro/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .kiro/skills/fe-a11y-carousel-toast/references/carousel-toast.mdskill
  • .kiro/steering/fe-a11y-carousel-toast.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-carousel-toast.md
---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
---

# Carousels and toasts (frontend-skills)

Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target). Use when adding a hero slider, product carousel, testimonial rotator, toast system, snackbar or notification banner, or when asked "is this carousel accessible".

- A carousel has named previous and next buttons, slide labels ("2 of 5") and a container label (a11y/carousel-controls).
- Auto-rotation has a pause button first in the carousel's Tab order and stops on hover and focus (a11y/carousel-controls).
- Anything that moves by itself for more than 5 seconds can be paused (a11y/pause-auto-motion).
- Toasts with actions or needed information stay until closed; others pause on hover and focus (a11y/toast-timing).
- Toasts are announced from one live region that is always in the page (a11y/status-message-live).
- Icon-only arrows, dots and close buttons have names (a11y/control-name).
- Never move focus into a toast; never put the only copy of important information in a toast.
- Respect `prefers-reduced-motion`: no auto-rotation and no slide animation when it is set.

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

Where fe-a11y-carousel-toast lands for Augment

  • .agents/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .agents/skills/fe-a11y-carousel-toast/references/carousel-toast.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-carousel-toast lands for Trae

  • .trae/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .trae/skills/fe-a11y-carousel-toast/references/carousel-toast.mdskill
  • .trae/rules/fe-a11y-carousel-toast.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-carousel-toast.md
---
description: "Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target). Use when adding a hero slider, product carousel, testimonial rotator, toast system, snackbar or notification banner, or when asked \"is this carousel accessible\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Carousels and toasts (frontend-skills)

- A carousel has named previous and next buttons, slide labels ("2 of 5") and a container label (a11y/carousel-controls).
- Auto-rotation has a pause button first in the carousel's Tab order and stops on hover and focus (a11y/carousel-controls).
- Anything that moves by itself for more than 5 seconds can be paused (a11y/pause-auto-motion).
- Toasts with actions or needed information stay until closed; others pause on hover and focus (a11y/toast-timing).
- Toasts are announced from one live region that is always in the page (a11y/status-message-live).
- Icon-only arrows, dots and close buttons have names (a11y/control-name).
- Never move focus into a toast; never put the only copy of important information in a toast.
- Respect `prefers-reduced-motion`: no auto-rotation and no slide animation when it is set.

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

Where fe-a11y-carousel-toast lands for Continue

  • .frontend-skills/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-carousel-toast/references/carousel-toast.mdskill
  • .continue/rules/fe-a11y-carousel-toast.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-carousel-toast.md
---
name: "Carousels and toasts"
description: "Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target). Use when adding a hero slider, product carousel, testimonial rotator, toast system, snackbar or notification banner, or when asked \"is this carousel accessible\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Carousels and toasts (frontend-skills)

- A carousel has named previous and next buttons, slide labels ("2 of 5") and a container label (a11y/carousel-controls).
- Auto-rotation has a pause button first in the carousel's Tab order and stops on hover and focus (a11y/carousel-controls).
- Anything that moves by itself for more than 5 seconds can be paused (a11y/pause-auto-motion).
- Toasts with actions or needed information stay until closed; others pause on hover and focus (a11y/toast-timing).
- Toasts are announced from one live region that is always in the page (a11y/status-message-live).
- Icon-only arrows, dots and close buttons have names (a11y/control-name).
- Never move focus into a toast; never put the only copy of important information in a toast.
- Respect `prefers-reduced-motion`: no auto-rotation and no slide animation when it is set.

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

Where fe-a11y-carousel-toast lands for Amazon Q Developer

  • .frontend-skills/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-carousel-toast/references/carousel-toast.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-carousel-toast` (Carousels and toasts): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-carousel-toast/SKILL.md`.
The real file

Where fe-a11y-carousel-toast lands for Aider

  • .frontend-skills/skills/fe-a11y-carousel-toast/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-carousel-toast/references/carousel-toast.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-carousel-toast` (Carousels and toasts): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-carousel-toast/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:

  • is this carousel accessible

And to check and fix the work:

  • Use the fe-a11y-carousel-toast skill on this file.
  • Run the front-end audit on what I changed and fix everything serious.
  • Explain a11y/carousel-controls and fix it here.

Rules it teaches

  • a11y/carousel-controls

    A carousel has named previous and next buttons, a pause button first in its Tab order when it rotates, and stops on hover and focus.

    seriousmanualWCAG 2.2.2, 4.1.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/toast-timing

    Toasts with actions or information the user needs do not disappear on a timer; others stay long enough and pause on hover and focus.

    moderatemanualWCAG 2.2.1, 4.1.3

  • a11y/status-message-live

    Messages that appear without moving focus (saved, results, errors, progress) are announced through a live region.

    seriousmanualWCAG 4.1.3

  • a11y/control-name

    Every button and link has an accessible name; icon-only controls get visually hidden text or aria-label.

    criticalstaticWCAG 4.1.2, 2.4.4

The rule digest

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

  • A carousel has named previous and next buttons, slide labels ("2 of 5") and a container label (a11y/carousel-controls).
  • Auto-rotation has a pause button first in the carousel's Tab order and stops on hover and focus (a11y/carousel-controls).
  • Anything that moves by itself for more than 5 seconds can be paused (a11y/pause-auto-motion).
  • Toasts with actions or needed information stay until closed; others pause on hover and focus (a11y/toast-timing).
  • Toasts are announced from one live region that is always in the page (a11y/status-message-live).
  • Icon-only arrows, dots and close buttons have names (a11y/control-name).
  • Never move focus into a toast; never put the only copy of important information in a toast.
  • Respect prefers-reduced-motion: no auto-rotation and no slide animation when it is set.

Steps the agent follows

  1. Question the carousel: a static grid or a single hero often works better for everyone. If it stays, start with auto-rotation off.
  2. Build it as a list of slides with buttons, not a library that hides off-screen slides only with transform; make hidden slides inert or hidden so their links leave the Tab order.
  3. Use CSS scroll snap for swipeable rows (scroll-snap-type: x mandatory) and add real buttons for people who cannot swipe.
  4. For toasts, mount one container with role="status" (and one role="alert" for errors) in the root layout; the toast function only writes into it.
  5. Keep a history: if a toast carried something important, it is also visible somewhere stable (a notifications page, the form itself).

How the agent checks the work

  • npx github:dawidolko/frontend-skills audit --changed finds unnamed icon buttons in carousels and toasts.
  • By hand: tab into the carousel (rotation stops, the pause button comes first), use it with the keyboard, turn on reduced motion; trigger each toast with a screen reader running and act on it before it goes.

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

SKILL.md on GitHub