Remotion + Claude Code: как поставить скилл и сделать первый ролик

Remotion собирает видео из кода на React. Команда Remotion поддерживает официальные скиллы для Claude Code: инструкции по композициям, анимации, шрифтам и рендеру. Я поставил всё с нуля 16 октября 2026 года на Remotion 4.0.536 и Claude Code 2.1.251. В моём тесте Claude Code сам вызвал нужный скилл и отрендерил первый MP4 по одному промпту.

Что такое Remotion skill для Claude Code?

Это набор из 12 скиллов в репозитории remotion-dev/skills. Каждый скилл лежит в своей папке: файл SKILL.md и справка по отдельной теме. Claude Code видит описания скиллов и может подгрузить нужный сам. В моём прогоне он вызвал remotion-markup без всякой команды, когда взялся за вёрстку кадра.

Вызвать скилл можно и вручную, через слэш: /remotion-create Сделай промо-ролик для магазина пластинок.

Что нужно до начала

• Node.js версии 20.x от 20.19.0, 22.x от 22.13.0 или 24 и выше. Такие версии указаны в package.json нового проекта. У меня стоял Node 26.
• Claude Code, он входит в тариф Pro. Как его поставить, я разобрал в отдельном гайде.
• FFmpeg ставить не пришлось. Remotion принёс свои ffmpeg и ffprobe в пакете @remotion/compositor-*, я нашёл их в node_modules.

Как поставить Remotion и скилл: 4 шага

Шаг 1. Создай проект

npx create-video@latest --yes --blank my-video
cd my-video

Флаг --yes отвечает на вопросы установщика за тебя, --blank даёт пустой шаблон без демо-сцен. У меня команда отработала за 27 секунд и поставила 345 пакетов. В конце установщик сам напоминает про лицензию: «Remotion is free for teams of up to 3».

Шаг 2. Поставь скиллы

Официальная команда из документации:

npx skills add remotion-dev/skills

Есть вторая, из инструкции Remotion для Claude Code: npx remotion skills add. Она запускает тот же установщик, результат у меня вышел одинаковый.

В моём терминале установщик (skills 1.7.2) задал пять вопросов: какие скиллы ставить, в каких агентов, куда (в проект или глобально), как (ссылками или копиями) и «Proceed?». На первом экране по умолчанию не было выбрано ничего. Я нажал пробел на строке Select All, потом Enter.

На втором экране будь внимателен. Блок Universal с папкой .agents/skills включён всегда. Claude Code стоял ниже, в списке Additional agents, и при первом запуске не был отмечен. На моём компьютере есть ещё Cursor, Codex и другие агенты, поэтому установщик показал список. Если бы я нажал Enter сразу, скиллы легли бы в .agents/skills, а Claude Code их не увидел бы. Это я проверил отдельно: в папке, где скилл лежал только в .agents/skills, Claude Code 2.1.251 его не нашёл. Найди строку «Claude Code (.claude/skills)» стрелками и отметь пробелом. На другой машине экраны могут отличаться.

Чтобы не зависеть от экранов, я ставлю одной командой без вопросов:

npx skills add remotion-dev/skills -a claude-code -s '*' -y

-a claude-code выбирает агента, -s '*' берёт все скиллы, -y пропускает подтверждения. За 7 секунд в проекте появилась папка .claude/skills с 12 скиллами. Проверить можно так:

ls .claude/skills

Шаг 3. Запусти Studio

pwd
npm run dev

pwd печатает полный путь к папке проекта. Скопируй его, он понадобится в шаге 4. Studio открывается на http://localhost:3000. Это плеер с таймлайном: здесь видно ролик, его размер, частоту кадров и длительность. Оставь окно открытым, Studio обновляет кадр сам, когда Claude Code меняет код.

Шаг 4. Открой Claude Code во втором окне терминала

cd /полный/путь/к/my-video
claude

Подставь путь, который напечатал pwd. Запускай Claude Code именно из папки проекта, потому что скиллы установлены в неё. Чтобы убедиться, что Claude Code их видит, набери /remotion: в подсказках должны появиться команды remotion-create, remotion-render и другие.

Первый ролик: мой промпт и что сделал Claude Code

Я попросил вертикальный ролик для рилса и описал сцену целиком, с размером, длительностью, цветом и шрифтом:

Сделай вертикальный ролик для рилса, 8 секунд, 1080×1920, 30 fps. Тёмный фон, акцентный цвет #E8723C. Сцена: на экране по буквам печатается команда «npx skills add remotion-dev/skills», под ней появляются три плашки «Studio», «Анимация», «Рендер MP4», в конце крупно надпись «Первый ролик готов». Шрифт Inter. Потом отрендери ролик в out/first-video.mp4.

Дальше Claude Code работал сам. Он подгрузил скилл remotion-markup, прочитал из него справку про шрифты и поставил пакет @remotion/google-fonts. Кириллицу в шрифт он добавил без подсказки. Потом написал сцену на 214 строк, проверил типы, отрендерил три контрольных кадра и посмотрел на них. Только после этого запустил полный рендер и проверил готовый файл через ffprobe. Всё заняло 3 минуты 16 секунд. Готовый ролик лежит в папке проекта: out/first-video.mp4.

Результат ниже. Анимацию на странице я ужал до 15 кадров в секунду, сам MP4 весит 172 КБ.

Как править ролик словами

Правки я пишу в ту же сессию по одной: так видно, что поменялось. Мой второй запрос:

Печатай команду в два раза быстрее, а финальную надпись держи на экране на секунду дольше, пусть ролик будет 9 секунд. Отрендери заново в out/first-video-v2.mp4.

Claude Code поменял две строки (скорость печати и длительность композиции) и перерендерил ролик. На это ушло 20 секунд. Если Studio открыта, новый вариант видно сразу, ещё до рендера.

Как отрендерить MP4 самому?

В терминале из папки проекта выполни:

npx remotion render FirstVideo out/video.mp4

FirstVideo здесь id композиции, его видно в Studio слева. Мой ролик на 240 кадров отрендерился за 5 секунд на MacBook с M2 Pro. Один кадр для проверки сохраняет npx remotion still FirstVideo out/frame.png --frame=60. Этим приёмом Claude Code и проверял сцену перед полным рендером.

Чем плагин отличается от отдельных скиллов?

Внутри у них одинаковые 12 скиллов Remotion, включая remotion-create, который умеет создать проект. Разница в способе установки. Скиллы ставит npx skills add в один проект или глобально, и их видят ещё Codex, Cursor и другие агенты. Плагин ставится через менеджер плагинов Claude Code, работает только в нём и вызывается с приставкой remotion:.

Команды из документации Remotion:

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

После установки Claude Code нужно перезапустить. В десктопном приложении Claude открой раздел Code, затем Customize → Plugins → Discover, найди remotion и нажми Add.

Я проверил плагин разовым запуском, без установки в свой Claude Code: claude --plugin-dir с копией репозитория. Claude Code увидел те же 12 скиллов версии 4.0.536 с приставкой remotion:. В пустой папке я написал /remotion:remotion-create и описание пятисекундной заставки. Claude Code сам создал проект через npx create-video, сверстал сцену, отрендерил MP4 1920×1080 и проверил кадр из середины. Вышло 1 минута 56 секунд.

12 скиллов Remotion: какие пригодятся

В моём тесте Claude Code сам взял remotion-markup. Для субтитров в наборе есть remotion-captions. Если Claude Code не подхватил нужный скилл, вызови его вручную через слэш.

Сколько стоит Remotion?

Частным лицам, некоммерческим организациям и компаниям до 3 сотрудников Remotion бесплатен, в том числе для коммерческих роликов. Остальные могут бесплатно оценить инструмент, пока не используют его коммерчески.

Если тебе нужна Company License, на remotion.pro место для тех, кто сам делает ролики, стоит $25 в месяц. Для сервисов, которые генерируют видео автоматически, тариф стоит 1 цент за рендер, минимум $100 в месяц. Remotion уже предупредил об изменениях в версии 5.0: подрядчики тоже будут считаться в размер команды.

Для сценария из этой статьи при бесплатной лицензии за Remotion платить не нужно. Плагин распространяется по лицензии MIT. Нужна подписка на Claude Code: он входит в Pro, по странице цен на 16.10.2026 это $20 в месяц при помесячной оплате или $17 при годовой.

Что может пойти не так

Ошибка 1. Claude Code не видит скиллы

Скиллы легли только в .agents/skills, например потому что Claude Code не был отмечен в списке агентов. Переустанови командой с -a claude-code.

Ошибка 2. Скиллы поставились в другой проект

Установщик кладёт проектные скиллы в папку, где ты его запустил. Если запустить его в другом проекте, Claude Code в my-video их не увидит. Запускай установку из my-video, а если скиллы нужны во всех проектах, выбери Global.

Ошибка 3. Старый Node.js

Проверь версию командой node -v до начала. Подойдёт 20.x от 20.19.0, 22.x от 22.13.0 или 24 и выше.

Чем Remotion отличается от HyperFrames?

Remotion собирает видео из компонентов React, HyperFrames от HeyGen собирает его из HTML и CSS. На HyperFrames я сделал все сцены из 16 промптов для моушн-графики. Как я монтирую на HyperFrames свои рилсы, разобрал в отдельном гайде. Подробное сравнение двух инструментов выйдет отдельной статьёй в теме «Видео и анимация».

Оба набора есть в каталоге скиллов: Remotion Skills и HyperFrames.

Источники

1. Документация Remotion: Agent Skills
2. Инструкция Remotion для Claude Code
3. Документация Remotion: плагин для Claude Code
4. remotion-dev/skills на GitHub
5. remotion-dev/claude-code-plugin на GitHub
6. Лицензия Remotion (LICENSE.md)
7. Цены Company License на remotion.pro
8. Изменения лицензии в Remotion 5.0 (PR #3750)
9. Документация Claude Code: где лежат скиллы
10. Пакет skills (CLI) на npm
11. Тарифы Claude