react-native-animations — скилл для Claude Code: суть и установка
Свод инструкций по плавной анимации интерфейсов в React Native на базе Reanimated 3 и Gesture Handler. Помогает собирать жесты и переходы без просадок кадров.
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a claude-codeЧто делает react-native-animations
Этот скилл обучает ассистента правилам генерации мобильных анимаций. Внутри разобрана работа с хуками useSharedValue и useAnimatedStyle, построение физических переходов через withSpring, таймингов через withTiming и затуханий с withDecay.
Навык включает примеры обработки касаний через GestureDetector, интерполяцию координат свайпа и готовые анимации списков с FadeIn, FadeOut и Layout.springify(). Отдельный блок посвящён частым сбоям вроде отсутствия директивы worklet, вызовов нативного кода без runOnJS и потери жестов без корневого GestureHandlerRootView. Без подключённого плагина react-native-reanimated/plugin в файле babel.config.js эти ворклеты работать не смогут.
Какие задачи решает
- Собрать карточки со свайпом, вращением и физикой возврата по отскоку
- Настроить появление и скрытие элементов списков через layout animations
- Устранить ошибку выполнения кода в ворклете с помощью
runOnJS - Запустить повторяющиеся и многосоставные цепочки через
withRepeatиwithSequence
Примеры запросов агенту
- Сделай карточку со свайпом и небольшим поворотом через
Gesture.Pan()и Reanimated 3 - Напиши список с плавной анимацией появления и удаления элементов через
FadeInиFadeOut - Исправь ошибку Attempted to call from worklet и оберни вызов в
runOnJS
Как установить react-native-animations
1Через Skills CLI (Vercel)
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a claude-code2Вручную: положить файлы
~/.claude/skills/react-native-animations/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/react-native-animations/
1Через Skills CLI (Vercel)
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a codex2Вручную: положить файлы
.agents/skills/react-native-animations/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a cursor2Вручную: положить файлы
.cursor/skills/react-native-animations/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pluginagentmarketplace/custom-plugin-react-native react-native-animations2Вручную: положить файлы
.github/skills/react-native-animations/SKILL.md1Через Skills CLI (Vercel)
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a gemini-cli2Командой платформы
gemini skills install https://github.com/pluginagentmarketplace/custom-plugin-react-native --path skills/react-native-animationsВручную: положить файлы
.devin/skills/react-native-animations/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о react-native-animations
Как установить react-native-animations в Claude Code?
Запустите команду npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a claude-code. Файл навыка появится по пути ~/.claude/skills/react-native-animations/SKILL.md.
Что делает скилл react-native-animations?
Он задаёт модели контекст и правила для работы с библиотеками Reanimated 3 и Gesture Handler. Модель начинает точнее связывать хуки, отслеживать жесты и использовать ворклеты.
Какие пакеты требуются в проекте для работы примеров?
Вам понадобятся установленные пакеты react-native-reanimated и react-native-gesture-handler. Также необходимо добавить react-native-reanimated/plugin в конфигурацию babel.config.js.
