remotion-saas — скилл для Codex: приложение на Remotion
Помогает собрать приложение с видео на Remotion: от простой формы с рендером до редактора. Пригодится, если делаете SaaS с генерацией видео.
npx skills add openai/plugins --skill remotion-saas -a codexЧто делает remotion-saas
Скилл описывает, как строить приложения на Remotion. Можно ограничиться простой формой, которая запускает рендер, а можно дойти до полноценного видеоредактора — выбор за вами.
Внутри разбор по частям: как выбрать шаблон или фреймворк для SaaS, как встроить компонент <Player> для предпросмотра в React-приложении, и чем отличаются клиентский и серверный рендеринг. Для серверной стороны перечислены варианты Lambda, Vercel, Node.js и Cloudflare. Отдельно есть указатели на использование Remotion с Vue, Angular и Svelte.
Скилл рассчитан на Codex и ChatGPT, поэтому в других агентах его придётся ставить вручную по пути для конкретной платформы. Если ваш проект уже плотно сидит на серверном рендеринге, сначала прочитайте раздел про выбор между клиентом и сервером — от него зависит вся архитектура.
Какие задачи решает
- собрать SaaS, где пользователь заполняет форму и получает готовое видео
- встроить предпросмотр Remotion прямо в React-приложение
- выбрать между клиентским и серверным рендерингом
- подобрать стартовый шаблон для видео-продукта
- подключить Remotion к Vue, Angular или Svelte
Примеры запросов агенту
- помоги выбрать шаблон Remotion для SaaS с формой и рендером
- как встроить <Player> в мой React-компонент
- сравни серверный рендеринг на Lambda и на Node.js
Как установить remotion-saas
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill remotion-saas -a codex2Вручную: положить файлы
.agents/skills/remotion-saas/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill remotion-saas -a claude-code2Вручную: положить файлы
~/.claude/skills/remotion-saas/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/remotion-saas/
Вручную: положить файлы
.cursor/skills/remotion-saas/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openai/plugins remotion-saas2Вручную: положить файлы
.github/skills/remotion-saas/SKILL.mdКомандой платформы
gemini skills install https://github.com/openai/plugins --path plugins/remotion/skills/remotion-saasВручную: положить файлы
.devin/skills/remotion-saas/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Скиллы Codex: как установить, где лежат и как вызвать
Вопросы о remotion-saas
Как установить remotion-saas в Claude?
Выполните npx skills add openai/plugins --skill remotion-saas, затем npx skills add openai/plugins --skill remotion-saas -a codex. После этого скилл лежит в .agents/skills/remotion-saas/SKILL.md.
Что делает remotion-saas?
Помогает строить приложения на Remotion: подсказывает по шаблонам для SaaS, компоненту <Player> и вариантам рендеринга.
С какими фреймворками работает Remotion по этому скиллу?
Основной путь — React, но есть отдельные указатели на Vue, Angular и Svelte.
Исходный текст
SKILL.md · MIT
--- name: remotion-saas description: Build an app with Remotion version: 4.0.506 --- One can build apps with Remotion. It is possible to have a simple form and hook it up to a render, or have a complex video editor. ## Choosing a template or a framework We have several templates for SaaS which can be cloned or used as a reference. See [Choosing a framework](framework.md) for help choosing a template or framework. ## The `<Player>` This component allows embedding a Remotion preview in a React app. See [Player](player.md) for more information about the Player. ## Rendering There are client-side and server-side rendering options available. See [Rendering](rendering.md) for advice on how to choose, and about the Lambda, Vercel, Node.js and Cloudflare options. ## With Vue See https://www.remotion.dev/docs/vue.md for how to use Remotion with Vue. ## Angular See https://www.remotion.dev/docs/angular.md for how to use Remotion with Angular. ## Svelte See https://www.remotion.dev/docs/svelte.md for how to use Remotion with Svelte.
© Remotion · MIT · openai/plugins