# animate

Справочник правил и готовых сниппетов для создания анимаций в React и Next.js. Помогает настроить переходы и диалоговые окна с учётом производительности.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3600 установок · ★ 131
- Автор: delphi-ai
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/delphi-ai/animate-skill/tree/HEAD/SKILL.md
- Обновлён: 2026-01-28
- HTML: https://affpapa.org/nevibecode/skills/delphi-ai-animate

## Что делает

Скилл добавляет в контекст агента шаблоны плавных переходов для веб-интерфейсов. Внутри собраны рекомендации по таймингам и свойствам CSS-переходов. Подсказки опираются на материалы курса Эмиля Ковальски по веб-анимациям.

Набор учит модель изменять только свойства `transform` и `opacity`, чтобы не перегружать рендеринг в браузере. Для интерактивных компонентов агент выбирает пружины вместо линейных функций. При сборке сложных сценариев со сменой вкладок или аккордеонами в проект нужно установить внешние пакеты `framer-motion`, `react-use-measure` и `usehooks-ts`.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add delphi-ai/animate-skill --skill animate -a claude-code
```
```bash
npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install delphi-ai/animate-skill delphi-ai-animate
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/delphi-ai/animate-skill
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/delphi-ai/animate-skill/tree/HEAD/SKILL.md

## Когда брать
- подобрать кривые плавности и тайминги для интерфейса
- настроить появление и скрытие модального окна через `AnimatePresence`
- добавить индикатор активной вкладки со сменой положения через `layoutId`
- учесть системные настройки доступности `prefers-reduced-motion`

## Примеры запросов агенту
- Сделай появление карточек в списке с небольшой задержкой для каждого элемента через Framer Motion.
- Добавь анимацию нажатия кнопки и подъёма карточки при наведении через CSS-переходы.
- Напиши компонент диалога с правильной скоростью закрытия и масштабированием.

## Похожие
- [mastering-animate-presence](https://affpapa.org/nevibecode/skills/mastering-animate-presence.md) — скилл · 322 установки
- [framer-motion-animator](https://affpapa.org/nevibecode/skills/framer-motion-animator.md) — скилл · 11100 установок
- [animation-performance](https://affpapa.org/nevibecode/skills/animation-performance.md) — скилл · 36800 установок
- [page-transition-animation](https://affpapa.org/nevibecode/skills/page-transition-animation.md) — скилл · 2300 установок
- [motion-dev-animations](https://affpapa.org/nevibecode/skills/motion-dev-animations.md) — скилл · 594 установки
- [micro-interaction](https://affpapa.org/nevibecode/skills/micro-interaction.md) — скилл · 2500 установок

## Другие версии с тем же именем
- [animate · emilkowalski](https://affpapa.org/nevibecode/skills/animate.md) — 172700 установок
- [animate · aladicf](https://affpapa.org/nevibecode/skills/aladicf-animate.md) — 607 установок

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