Carousels and toasts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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