motion react
Build React animations with Motion (formerly Framer Motion) - gestures (drag, hover, tap),
AIpedronauck
official
Дизайн
Что делает навык
Навык позволяет создавать анимации в React с использованием библиотеки Motion (ранее Framer Motion), поддерживая жесты, такие как drag, hover и tap. Он обеспечивает импорт компонентов из пакета motion и корректную настройку для различных сред, включая Next.js App Router.
Когда применять
- Создание интерактивных кнопок с анимацией при наведении и нажатии
- Реализация перетаскиваемых элементов (drag) в интерфейсе
- Анимация появления и исчезновения компонентов с помощью AnimatePresence
- Оптимизация дерева пакетов в Next.js App Router через tree-shaking
Как работает
- Установить пакет motion с помощью команды pnpm add motion
- Импортировать компоненты motion и AnimatePresence из 'motion/react' для стандартных React-проектов
- Для Next.js App Router использовать 'motion/react-client' и директиву 'use client' для корректной обработки RSC
- Применять компоненты motion для добавления анимаций к элементам интерфейса
- Настроить жесты (drag, hover, tap) через пропсы компонентов motion
Примеры запросов агенту
Добавь анимацию наведения и нажатия на кнопку с использованием motion
Создай перетаскиваемый элемент в React с помощью библиотеки motion
Реализуй анимацию появления компонента в Next.js App Router с tree-shaking
Что понадобится
- Установленный пакет motion (pnpm add motion)
- React-проект с поддержкой импорта из 'motion/react' или 'motion/react-client'
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «motion-react» из репозитория:
# https://github.com/pedronauck/skills
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r motion-react/ ~/.claude/skills/motion-react/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.