remotion-markup — скилл для Claude Code: правила разметки Remotion
Скилл задаёт правила написания React-разметки для Remotion: анимации через кадры, работа с медиа и эффектами. Пригодится, если вы собираете видео кодом.
npx skills add remotion-dev/skills --skill remotion-markup -a claude-codeЧто делает remotion-markup
Скилл описывает, как писать разметку в Remotion. Главное правило — useCurrentFrame() держать в самом маленьком компоненте, которому он нужен. Зависимые от кадра громкость, титры и оверлеи выносят в отдельные компоненты, иначе всё вокруг перерисовывается на каждом кадре.
Анимации строятся на useCurrentFrame() и interpolate(). CSS transition и animation не отрисуются правильно, классы анимации Tailwind тоже — их нужно переписывать. Тайминг настраивают через Easing.bezier() и Easing.spring(). Вызов interpolate() держат прямо в пропе style, а вместо transform используют scale, translate и rotate: так значения остаются редактируемыми в Studio. Для секунд берут fps из useVideoConfig() и оставляют выражение на JSX-узле вроде trimBefore={4 * fps}.
Медиа подключают компонентами ` и из @remotion/media, картинки — через , анимированные GIF, APNG, WebP и AVIF — через . Файлы кладут в public/ и ссылаются через staticFile(), либо передают удалённый URL. Дальше скилл отправляет читать отдельные файлы: video-editing.md, sequencing.md, timing-props.md, transitions.md, motion-blur.md, voiceover.md` и другие. Ставить стоит тем, кто уже пишет композиции на Remotion и хочет, чтобы агент не ломал редактируемость в Studio. Если Remotion в проекте нет, скилл просто не к чему применить.
Какие задачи решает
- вынести анимацию титров в отдельный компонент, чтобы не перерисовывать всю сцену
- переписать CSS-переходы на interpolate() с кадрами
- подключить видео и аудио через @remotion/media
- сделать тайминг редактируемым в Studio через fps и inline-пропсы
- добавить эффект вроде vignette прямо к видео
Примеры запросов агенту
- сделай компонент FadeIn с плавным появлением заголовка за 2 секунды
- перепиши CSS transition на interpolate с Easing.spring
- подключи видео из public/ через staticFile и @remotion/media
Как установить remotion-markup
1Через Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-markup -a claude-code2Вручную: положить файлы
~/.claude/skills/remotion-markup/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/remotion-markup/
1Через Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-markup -a codex2Вручную: положить файлы
.agents/skills/remotion-markup/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-markup -a cursor2Вручную: положить файлы
.cursor/skills/remotion-markup/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install remotion-dev/skills remotion-markup2Вручную: положить файлы
.github/skills/remotion-markup/SKILL.md1Через Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-markup -a gemini-cli2Командой платформы
gemini skills install https://github.com/remotion-dev/skills --path skills/remotion-markupВручную: положить файлы
.devin/skills/remotion-markup/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-markup -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора8
Весь набор →Похожие
Вопросы о remotion-markup
Как установить remotion-markup в Claude Code?
Командой npx skills add remotion-dev/skills --skill remotion-markup -a claude-code. Файл скилла окажется в ~/.claude/skills/remotion-markup/SKILL.md.
Что делает remotion-markup?
Даёт агенту правила разметки Remotion: где держать useCurrentFrame(), как строить анимации через interpolate() и Easing, как подключать медиа и эффекты.
Почему CSS transition и классы анимации Tailwind не подходят?
В Remotion они не отрисуются правильно при рендере видео. Скилл требует переписать их на useCurrentFrame() и interpolate().
