# accessible-motion

Скилл помогает заменить опасные анимации на безопасные альтернативы и соблюсти требования WCAG по движению. Пригодится, когда в интерфейсе есть параллакс, зум или бесконечные циклы.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 640 установок · ★ 124
- Автор: dylantarre
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/01-by-domain/accessible-motion/SKILL.md
- Обновлён: 2025-12-30
- HTML: https://affpapa.org/nevibecode/skills/accessible-motion

## Что делает

Скилл берёт 12 принципов анимации Disney и переписывает каждый под доступность. Squash & Stretch превращается в смену прозрачности или цвета, Anticipation — в статичный индикатор загрузки, Follow Through убирается совсем. Внутри — таблица соответствий, готовые сниппеты на CSS и JavaScript для `prefers-reduced-motion`, список безопасных и вредных паттернов движения.

Отдельный блок — критерии WCAG 2.1: 2.3.3 (AAA), 2.2.2 (A) и 2.3.1 (A). Есть чек-лист из десяти пунктов и порядок тестирования: включить reduced motion в настройках ОС, проверить, что вся функциональность работает, пройтись со скринридером.

Скилл советует избегать диапазона 150–400 мс: такая скорость достаточно заметна, чтобы вызвать симптомы. Выбор между мгновенной сменой состояния (0 мс) и мягким переходом от 500 мс. Если в проекте уже есть автовоспроизводимое видео на фоне или бесконечные анимации, это повод проверить их в первую очередь.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill accessible-motion -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/accessible-motion/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/accessible-motion/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill accessible-motion -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/accessible-motion/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill accessible-motion -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/accessible-motion/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles accessible-motion
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/accessible-motion/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill accessible-motion -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/01-by-domain/accessible-motion
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/accessible-motion/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill accessible-motion -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/01-by-domain/accessible-motion/SKILL.md

## Когда брать
- заменить параллакс и зум на безопасные переходы
- добавить поддержку `prefers-reduced-motion` в CSS и JavaScript
- пройти критерии WCAG 2.3.3, 2.2.2 и 2.3.1
- убрать бесконечные и мигающие анимации
- проверить интерфейс на совместимость с настройками ОС

## Примеры запросов агенту
- Проверь анимации на этой странице и замени опасные на безопасные альтернативы
- Добавь поддержку `prefers-reduced-motion` для модальных окон и переключателей
- Составь чек-лист доступности движения для этого компонента

## Похожие
- [accessible-animation](https://affpapa.org/nevibecode/skills/accessible-animation.md) — скилл · 2600 установок
- [motion-system](https://affpapa.org/nevibecode/skills/motion-system.md) — скилл · 1800 установок
- [motion-principles](https://affpapa.org/nevibecode/skills/motion-principles.md) — скилл · 1100 установок
- [motion-foundations](https://affpapa.org/nevibecode/skills/motion-foundations.md) — скилл · 4700 установок
- [design-motion-principles](https://affpapa.org/nevibecode/skills/design-motion-principles.md) — скилл · 12700 установок
- [motion-design](https://affpapa.org/nevibecode/skills/motion-design.md) — скилл · 19900 установок

Из того же набора: [dylantarre/animation-principles](https://affpapa.org/nevibecode/by/dylantarre/animation-principles.md) — 86 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md