reanimated-skia-performance — скилл для Claude Code: анимации React
Скилл для написания и разбора быстрых анимаций и 2D-графики в React Native на Reanimated v4 и Skia. Пригодится, когда интерфейс тормозит или нужно нарисовать что-то своё.
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a claude-codeЧто делает reanimated-skia-performance
Скилл задаёт правила, по которым агент пишет и проверяет анимации: состояние живёт в UI-потоке через useSharedValue, useDerivedValue и ворклеты, вместо устаревшего Animated берётся декларативный API Reanimated v4. В коде советует shared.get() и shared.set() вместо обращения к .value — так дружелюбнее к React Compiler. Переходы между JS и UI-потоком сводятся к минимуму, runOnJS и scheduleOnRN остаются только для побочных эффектов, которые иначе не сделать.
Для Skia главное правило простое: не гонять React-рендер каждый кадр. SharedValue передаётся прямо в пропсы и юниформы, runtime-эффект компилируется один раз через useMemo, а время для шейдера берётся из useClock и заворачивается в useDerivedValue. Скилл разбирает и типовые сценарии: жест через Gesture Builder API, CSS-переходы и keyframes в Reanimated v4, Layout Animations на монтирование и размонтирование, панель со слайдерами в __DEV__ для подбора параметров. Отдельный список грабель — чтение shared value в рендере, аллокации массивов и путей на каждом кадре, забытая юниформа в шейдере.
Скилл опирается на четыре справочника внутри репозитория: паттерны Reanimated v4, шейдеры Skia, dev-панель и чек-лист производительности. Ставить его имеет смысл, если в проекте уже есть react-native-reanimated версии 4 и выше и @shopify/react-native-skia — на более старом Reanimated часть примеров не соберётся.
Какие задачи решает
- разобраться, почему анимация дёргается и где JS-поток упирается в лишние ре-рендеры
- перевести жест-панораму на Gesture Builder API и shared values
- нарисовать сцену на Skia Canvas с шейдером, который реагирует на время
- подобрать параметры пружины или юниформы шейдера через слайдеры в dev-режиме
- заменить устаревший
Animatedна декларативные API Reanimated v4
Примеры запросов агенту
- Перепиши этот экран на Reanimated v4: жест панорамы через Gesture Builder, состояние в shared values, без runOnJS в onUpdate
- Сделай шейдер на Skia с анимированной юниформой времени, эффект скомпилируй один раз через useMemo
- Добавь dev-панель со слайдерами для подбора параметров пружины, саму панель вынеси в отдельный компонент
Как установить reanimated-skia-performance
1Через Skills CLI (Vercel)
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a claude-code2Вручную: положить файлы
~/.claude/skills/reanimated-skia-performance/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/reanimated-skia-performance/
1Через Skills CLI (Vercel)
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a codex2Вручную: положить файлы
.agents/skills/reanimated-skia-performance/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a cursor2Вручную: положить файлы
.cursor/skills/reanimated-skia-performance/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install andreev-danila/skills reanimated-skia-performance2Вручную: положить файлы
.github/skills/reanimated-skia-performance/SKILL.md1Через Skills CLI (Vercel)
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a gemini-cli2Командой платформы
gemini skills install https://github.com/andreev-danila/skills --path skills/reanimated-skia-performanceВручную: положить файлы
.devin/skills/reanimated-skia-performance/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add andreev-danila/skills --skill reanimated-skia-performance -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Похожие
Рядом в теме «Мобильная разработка»
Всё по теме «Мобильная разработка» →Вопросы о reanimated-skia-performance
Как установить reanimated-skia-performance в Claude?
Выполните npx skills add andreev-danila/skills --skill reanimated-skia-performance -a claude-code. Файл скилла окажется по пути ~/.claude/skills/reanimated-skia-performance/SKILL.md.
Что делает reanimated-skia-performance?
Помогает агенту писать и проверять анимации и 2D-графику в React Native на Reanimated v4 и Skia: жесты, пружины и переходы, отрисовку на Canvas, шейдеры с анимированными юниформами, а также искать причины подтормаживаний.
Какие библиотеки нужны для работы скилла?
react-native-reanimated версии 4 и выше и @shopify/react-native-skia. На более старом Reanimated примеры со CSS-переходами и keyframes не сработают.
