remotion-interactivity — скилл для Claude Code: что делает
Подсказывает агенту, как размечать компоненты Remotion для редактирования в Remotion Studio. Пригодится при верстке видеосцен с настраиваемыми стилями, текстом и таймлайном.
npx skills add remotion-dev/skills --skill remotion-interactivity -a claude-codeЧто делает remotion-interactivity
Скилл объясняет правила верстки под Remotion Studio 4.0.538. Чтобы элементы можно было перемещать, обрезать или перекрашивать в интерфейсе редактора, разметка строится через обертку Interactive (например, Interactive.Div). Все редактируемые стили и фиксированные тексты он требует писать инлайн прямо в JSX-элементе, избегая выноса в константы или внешние объекты.
Внутри заданы правила формирования схем свойств (InteractivitySchema). Скилл подсказывает, какие типы полей поддерживают ключевые кадры (number, color, uv-coordinate), а какие остаются статичными. Также он учит подключать готовые фрагменты вроде Interactive.textSchema или Interactive.borderRadiusSchema, запрещая вручную объявлять стандартные трансформации и прозрачность.
Ставить этот скилл имеет смысл, если вы собираете интерактивные шаблоны видеороликов и хотите менять плашки, надписи или цвета прямо через визуальный редактор Remotion.
Какие задачи решает
- подготовить JSX-компоненты для редактирования в Remotion Studio
- описать схему настраиваемых параметров через InteractivitySchema
- подключить готовые наборы полей для типографики и фонов
- сделать HTML- или SVG-элементы интерактивными через Interactive
Примеры запросов агенту
- Сделай этот текстовый блок в Remotion интерактивным с настройкой цвета и размера шрифта
- Опиши схему InteractivitySchema для плашки с настраиваемым радиусом скругления и фоном
- Отрефактори компонент сцены, перенеся стили и фиксированный текст инлайн для Studio
Как установить remotion-interactivity
1Через Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-interactivity -a claude-code2Вручную: положить файлы
~/.claude/skills/remotion-interactivity/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/remotion-interactivity/
1Через Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-interactivity -a codex2Вручную: положить файлы
.agents/skills/remotion-interactivity/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-interactivity -a cursor2Вручную: положить файлы
.cursor/skills/remotion-interactivity/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install remotion-dev/skills remotion-interactivity2Вручную: положить файлы
.github/skills/remotion-interactivity/SKILL.md1Через Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-interactivity -a gemini-cli2Командой платформы
gemini skills install https://github.com/remotion-dev/skills --path skills/remotion-interactivityВручную: положить файлы
.devin/skills/remotion-interactivity/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add remotion-dev/skills --skill remotion-interactivity -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора8
Весь набор →Похожие
Вопросы о remotion-interactivity
Как установить remotion-interactivity в Claude Code?
Выполните команду npx skills add remotion-dev/skills --skill remotion-interactivity -a claude-code.
Зачем нужен скилл remotion-interactivity?
Он обучает ИИ-ассистента структурировать верстку Remotion так, чтобы слои, текст и стили сцены можно было редактировать через интерфейс Remotion Studio.
Нужно ли вручную объявлять поля трансформации и прозрачности в схеме?
Нет, метод Interactive.create() автоматически добавляет параметры translate, scale, rotate, transformOrigin и opacity, поэтому дублировать их в схеме не нужно.
