remotion-animation — скилл для Claude Code
Формирует параметры анимаций для Remotion: пружины, интерполяции и тайминги кадров без кода компонентов.
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a claude-codeЧто делает remotion-animation
Скилл переводит текстовые описания движения или спецификации сцен в файл ANIMATION_CONFIG.md. Внутри формируются готовые блоки TypeScript с константами: физика пружин (damping, stiffness, mass), диапазоны interpolate и покадровые задержки.
Скилл рассчитывает логику прогресса по кадрам (frame), но намеренно не пишет сами компоненты React и не верстает сцены. Для генерации разметки элементов автор рекомендует отдельные инструменты вроде /remotion-component-gen.
Какие задачи решает
- рассчитать параметры затухания и жесткости для пружин Remotion
- задать диапазоны интерполяции для масштабирования и смещения
- настроить ступенчатое появление элементов с шагом в кадрах
- сформировать кривые плавности и формулы прогресса по кадрам
Примеры запросов агенту
- Настрой плавный вход логотипа с легким отскоком и затуханием 200 на 30 кадров.
- Рассчитай ступенчатую анимацию появления списка с задержкой 5 кадров между строками.
Как установить remotion-animation
1Через Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a claude-code2Вручную: положить файлы
~/.claude/skills/remotion-animation/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/remotion-animation/
1Через Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a codex2Вручную: положить файлы
.agents/skills/remotion-animation/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a cursor2Вручную: положить файлы
.cursor/skills/remotion-animation/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install ncklrs/startup-os-skills remotion-animation2Вручную: положить файлы
.github/skills/remotion-animation/SKILL.md1Через Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a gemini-cli2Командой платформы
gemini skills install https://github.com/ncklrs/startup-os-skills --path skills/remotion-animationВручную: положить файлы
.devin/skills/remotion-animation/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о remotion-animation
Как установить remotion-animation в Claude Code?
Выполните команду npx skills add ncklrs/startup-os-skills --skill remotion-animation -a claude-code. Также можно сохранить файл по пути ~/.claude/skills/remotion-animation/SKILL.md.
Что делает remotion-animation?
Он преобразует словесные описания эффектов в файл конфигурации ANIMATION_CONFIG.md с объектами SPRING_CONFIGS, INTERPOLATIONS и таймингами.
Генерирует ли скилл готовые React-компоненты?
Нет, скилл отвечает только за числовые параметры и функции движения. Разметку JSX и стилизацию элементов нужно собирать в компонентах отдельно.
