react-native-ease — скилл
Скилл находит в проекте анимации на Reanimated и Animated и переносит их на нативные EaseView из библиотеки react-native-ease
- 994 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скилл переписывает исходники компонентов с анимациями и добавляет импорты, поэтому изменения нужно просмотреть в git
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/react-native-easeОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл переписывает исходники компонентов с анимациями и добавляет импорты, поэтому изменения нужно просмотреть в git
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
react-native-ease — библиотека декларативных анимаций для React Native, которая вместо JS-цикла использует Core Animation на iOS и Animator на Android. В репозитории лежит скилл `react-native-ease-refactor`, который переносит на нее уже написанный код. Вызывается он как /react-native-ease-refactor в Claude Code и ведет работу строго по шести фазам. Сначала скилл ищет в проекте код на `react-native-reanimated` и встроенном Animated, определяет версию Reanimated и наличие NativeWind. Затем он делит анимации на переносимые и непереносимые. К непереносимым относятся жесты Pan и Pinch, воркеты, withSequence, сложные цепочки withDelay и анимации, которые запускает прокрутка, а не состояние React. По каждой причина указана в отчете. После пробного отчета с примерами «было и стало» вы выбираете компоненты, которые переносить. Скилл заменяет их на EaseView и сохраняет остальную логику, а при NativeWind добавляет нужный импорт. Сам компонент принимает значения в `animate` и параметры в `transition`: `timing` с длительностью и кривой Безье, `spring` с жесткостью и затуханием, цикл `repeat` и `reverse`. Смена значения посреди анимации плавно перенаправляет ее к новой цели.
Для кого. Разработчикам React Native, у которых простые анимации появления, затухания и сдвига написаны на Reanimated или Animated и тянут за собой лишний код.
Подходит, если
- В проекте десятки анимаций появления, затухания и масштаба на Reanimated, и хочется убрать воркеты и общие значения
- Перед миграцией нужен отчет, какие анимации переносятся, а какие нет, с причинами
- Проект использует NativeWind, и классы должны работать на анимированных компонентах
- Нужны анимации на нативных API платформы без JS-цикла
- Анимации надо переносить частями, выбирая компоненты вручную после отчета
Не подходит, если
- Анимации управляются жестами: панорамирование и щипок остаются на Reanimated
- Меняется ширина, высота или раскладка: анимации макета библиотека не поддерживает
- Нужны общие переходы элементов между экранами: для них авторы советуют Reanimated или React Navigation
- Приложение работает на старой архитектуре: библиотеке нужна новая, Fabric
Пример запроса к агенту
/react-native-ease-refactor Найди все анимации на Reanimated, покажи отчет с причинами для непереносимых, а перенос начни после моего выбора компонентовОграничения
Библиотека работает только на новой архитектуре React Native (Fabric) и не умеет анимировать раскладку, жесты и общие переходы. Скилл переносит только анимации, зависящие от состояния React, и помечает остальные как непереносимые. Результат нужно проверить в приложении: автор советует просмотреть заявленные «было и стало» до применения. Скилл ставится общей командой `npx skills add appandflow/react-native-ease`, отдельной инструкции по установке самого скилла в README нет.
Как отключить. Удалите скилл из .claude/skills или .agents/skills. Если миграция не нужна, библиотеку удалите командой `npm uninstall react-native-ease` и верните компоненты через git.
Частые вопросы
Как поставить скилл миграции?
Выполните `npx skills add appandflow/react-native-ease`. Затем вызовите его в агенте, например /react-native-ease-refactor в Claude Code. Саму библиотеку устанавливает команда `npm install react-native-ease`.
Что скилл делает с кодом без моего согласия?
Ничего. Сначала он выводит пробный отчет с «было и стало» по каждой анимации, затем просит выбрать компоненты. Изменения вносятся только в выбранные файлы.
Какие анимации скилл переносить не станет?
Управляемые жестами (Pan, Pinch, Rotation), использующие воркеты и runOnUI, с withSequence, со сложной цепочкой withDelay и привязанные к прокрутке, а не к состоянию. Причина каждого отказа указана в отчете.
Чем EaseView отличается от Reanimated?
EaseView запускает анимацию на нативных API платформы по новым значениям в `animate`, как CSS-переход. Reanimated остается нужен для жестов, анимации макета и сложных цепочек.
Как подключить NativeWind?
Один раз добавьте в точку входа приложения `import 'react-native-ease/nativewind'`. Скилл обнаруживает NativeWind сам и добавляет этот импорт. Для Uniwind импортируйте EaseView из react-native-ease/uniwind.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыАнимации, жесты, ИИ на устройстве, аудио и потоковое видео: 10 скиллов Software Mansion подсказывают агенту приемы React Native.
Скиллы Callstack для React Native
Callstack Agent Skills
Скиллы Callstack по React Native: производительность, обновление версий, миграция нативных приложений, тестирование и CI
Два скилла команды React Navigation переводят навигаторы на статическую конфигурацию и обновляют библиотеку до 7 или 8 версии
Uniwind skills
Uniwind
Два скилла для React Native с Tailwind v4: правила стилизации через Uniwind и пошаговый перенос проекта с NativeWind
Скиллы Storybook для React Native
Storybook for React Native agent skills
Три скилла для Claude Code и Cursor: подключение Storybook v10 к React Native, написание stories в CSF и обновление версий по одному шагу
Скилл учит агента рисовать экраны мобильных приложений: пять шагов, правило 60/30/10, сетка из 8 пикселей и отраслевые конвенции
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| react-native-ease (эта карточка) | нет | 994 | |
| React Native Unistyles v3 skill | нет | 2 973 | учит стилизации React Native через Unistyles, а этот скилл переносит анимации на нативные API |
| Motion Design Skill | нет | 2 828 | дает общие принципы motion-дизайна, а здесь конкретная миграция кода анимаций в React Native |
Коротко о README
README объясняет, что библиотека легкая и использует API платформы без JS-цикла. Раздел «Getting `started`» описывает установку, скилл миграции, поддержку NativeWind и Uniwind и пример. Раздел «Why» перечисляет цели и отказы, а таблица показывает, когда выбирать Ease, а когда Reanimated. Дальше идет руководство по анимациям `timing` и `spring`.
Бейдж для README
Исходный SKILL.md
---
name: react-native-ease-refactor
description: Scan for Animated/Reanimated code and migrate to EaseView
user-invocable: true
---
# react-native-ease refactor
You are a migration assistant that converts `react-native-reanimated` and React Native's built-in `Animated` API code to `react-native-ease` `EaseView` components.
Follow these 6 phases exactly. Do not skip phases or reorder them.
---
## Phase 1: Discovery
Scan the user's project for animation code:
1. Use Grep to detect if the project uses NativeWind:
- Pattern: `from ['"]nativewind['"]` in `**/*.{ts,tsx,js,jsx}`
- Also check `package.json` for `"nativewind"` in dependencies
- If NativeWind is detected, set a flag `usesNativeWind = true` for use in Phase 5
2. Detect the Reanimated version (needed for default value mapping in Phase 2):
- Read `package.json` and check the `react-native-reanimated` version in `dependencies` or `devDependencies`
- If the version is `^4` or `>=4.0.0`, set `reanimatedVersion = 4`
- Otherwise set `reanimatedVersion = 3` (covers v2/v3 which share the same defaults)
3. Use Grep to find all files importing from `react-native-reanimated`:
- Pattern: `from ['"]react-native-reanimated['"]`
- Search in `**/*.{ts,tsx,js,jsx}`
4. Use Grep to find all files using React Native's built-in `Animated` API:
- Pattern: `from ['"]react-native['"]` that also use `Animated`
- Pattern: `Animated\.View|Animated\.Text|Animated\.Image|Animated\.Value|Animated\.timing|Animated\.spring`
3. Use Grep to find files already using `react-native-ease` (to avoid re-migrating):
- Pattern: `from ['"]react-native-ease['"]`
4. Read each file that contains animation code. Build a list of components with their animation patterns.