AIKraft/AI/Войти
AIKraft/Skills/animate-expo

animate-expo

Создаёт анимации в React Native и Expo с использованием Reanimated, Gesture Handler, Expo Router и expo-haptics. Помогает при добавлении жестов, переходов, тактильной отдачи и оптимизации производительности. Для веба используйте `animate`.

emilkowalski official Разработка ★ 43.3k

Что делает навык

Навык создаёт высокопроизводительные анимации в React Native и Expo, используя Reanimated, Gesture Handler, Expo Router и expo-haptics. Он обеспечивает плавность работы за счёт выполнения анимаций в UI-рантайме (Worklets), избегая блокировки основного потока React Native.

Когда применять

  • Добавление интерактивных жестов (press, position) с корректной передачей скорости (velocity handoff) и возможностью прерывания анимации.
  • Создание переходов между экранами с использованием Expo Router, оптимизированных для мобильных устройств.
  • Интеграция тактильной отдачи (haptics) для улучшения пользовательского опыта при взаимодействии с элементами.
  • Оптимизация производительности анимаций для работы на реальных устройствах без задержек и подтормаживаний.

Как работает

  1. Использовать Worklets из Reanimated 4 для выполнения анимационных вычислений исключительно в UI-рантайме.
  2. Заменять веб-эффекты навадения (hover) на жесты нажатия (press) или изменения позиции, так как в мобильных интерфейсах hover отсутствует.
  3. Обеспечивать прерываемость анимаций и корректную передачу скорости от жестов пользователя к анимационным траекториям.
  4. Применять expo-haptics для добавления тактильной обратной связи, соответствующей действиям пользователя.
  5. Интегрировать анимации с Expo Router для создания плавных переходов между экранами приложения.

Примеры запросов агенту

Как реализовать плавный переход между экранами с использованием Expo Router и Reanimated?
Добавь тактильную отдачу и анимацию нажатия на кнопку, чтобы она реагировала на жесты пользователя.
Как оптимизировать анимацию списка, чтобы она не тормозила основной поток React Native?

Что понадобится

  • React Native и Expo
  • Reanimated (включая Worklets)
  • Gesture Handler

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «animate-expo» из репозитория: # https://github.com/emilkowalski/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r animate-expo/ ~/.claude/skills/animate-expo/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.