К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

remotion-studio — скилл для Remotion: предпросмотр видео

Скилл запускает Remotion Studio и открывает предпросмотр видео. Подойдёт, если вы хотите видеть композицию и проверять изменения прямо во время работы.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add remotion-dev/skills --skill remotion-studio -a claude-code
Открыть на GitHub

Что делает remotion-studio

При создании или правке видео скилл предлагает запустить Studio, как только проект можно запустить. Оставьте её открытой: так пользователь сможет смотреть на изменения и направлять работу. После появления композиции проверьте, что её предпросмотр загрузился.

Команда npx remotion studio автоматически открывает браузер. Если вы используете встроенный браузер агента, запустите Studio с --no-open, затем откройте точный URL из вывода команды и проверьте загрузку. Если Studio уже работает, команда напечатает URL и завершится; иначе запустится длительный процесс. Для выбора порта есть --port=, а --force-new запускает отдельный экземпляр. Ставьте этот скилл, если нужен видимый предпросмотр в процессе работы над видео; без браузера, где можно открыть URL, режим --no-open не подойдёт.

Какие задачи решает

  • запустить Studio, когда проект уже можно выполнить
  • открыть предпросмотр видео в браузере
  • проверить загрузку предпросмотра композиции
  • задать порт сервера Studio

Примеры запросов агенту

  • Запусти Remotion Studio и открой предпросмотр проекта.
  • Оставь Studio открытой, пока я меняю композицию.
  • Запусти Studio с `--no-open` и открой URL во встроенном браузере.

Как установить remotion-studio

1Через Skills CLI (Vercel)

npx skills add remotion-dev/skills --skill remotion-studio -a claude-code

2Вручную: положить файлы

~/.claude/skills/remotion-studio/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/remotion-studio/

Из того же набора8

Весь набор →
remotion-best-practices remotion-dev Маршрутизирует задачи Remotion к подходящим инструкциям для создания видео, React-разметки, карт, мультимедиа и рендера. Claude Code CX Codex Cursor +1 678 800установок remotion-create remotion-dev Скилл создаёт новый проект Remotion и помогает подготовить видеокомпозицию. Подойдёт, когда видео нужно собирать из React-разметки. Claude Code CX Codex Cursor +1 208 800установок remotion-captions remotion-dev Скилл для работы с субтитрами в Remotion: транскрипция видео, вывод и анимация подписей, импорт из .srt. Claude Code CX Codex Cursor +1 206 600установок remotion-markup remotion-dev Скилл задаёт правила написания React-разметки для Remotion: анимации через кадры, работа с медиа и эффектами. Пригодится, если вы собираете видео кодом. Claude Code CX Codex Cursor +1 202 600установок remotion-interactivity remotion-dev Подсказывает агенту, как размечать компоненты Remotion для редактирования в Remotion Studio. Пригодится при верстке видеосцен с настраиваемыми стилями, текстом и таймлайном. Claude Code CX Codex Cursor +1 197 900установок remotion-docs remotion-dev Скилл помогает агенту находить актуальные страницы документации Remotion и читать их в Markdown. Пригодится перед реализацией функций Remotion. Claude Code CX Codex Cursor +1 195 200установок remotion-upgrade remotion-dev Обновляет библиотеки Remotion и сопутствующие пакеты в проекте до актуальной версии. Пригодится, когда нужно синхронизировать зависимости и локальные скиллы без конфликтов. Claude Code CX Codex Cursor +1 186 800установок

Похожие

gsap-timeline greensock Скилл помогает собирать последовательности GSAP-анимаций, управлять таймингом и воспроизведением. Нужен для многошаговых и параллельных сцен. Claude Code CX Codex Cursor +1 68 500установок gsap-plugins greensock Скилл объясняет, как подключать и использовать плагины GSAP: ScrollTo, Flip, Draggable, SplitText и другие. Пригодится, когда анимации в проекте уже на GSAP. Claude Code CX Codex Cursor +1 66 600установок gsap-react greensock Скилл подсказывает, как создавать анимации GSAP в React и Next.js, ограничивать их область действия и очищать при размонтировании компонента. Claude Code CX Codex Cursor +1 65 800установок animation-performance emilkowalski Диагностический скилл, который ищет причину пропущенных кадров в веб-анимациях и подсказывает, какой свойство анимировать вместо дорогого. Claude Code CX Codex Cursor +1 34 700установок gsap-utils greensock Скилл помогает агенту работать с утилитами gsap.utils: диапазонами, случайными значениями, привязкой к шагу и коллекциями. Пригодится для анимаций на GSAP. Claude Code CX Codex Cursor +1 64 700установок daisyui saadeghi Скилл подключает к ИИ-агенту справочник компонентов daisyUI 5, чтобы тот писал разметку на готовых классах, а не выдумывал свои. Claude Code CX Codex Cursor +1 12 000установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок

Вопросы о remotion-studio

Как установить remotion-studio в Claude Code?

Выполните npx skills add remotion-dev/skills --skill remotion-studio -a claude-code.

Что делает remotion-studio?

Скилл помогает запустить Remotion Studio и проверить предпросмотр видео по мере работы над композицией.

Когда использовать `--no-open`?

Используйте этот флаг, если собираетесь открыть напечатанный URL во встроенном браузере агента. Если открыть URL там нельзя, запускайте Studio без --no-open.

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой