К основному содержанию
скилл CX Codex GP ChatGPT официальный · OpenAI

remotion-saas — скилл для Codex: приложение на Remotion

Помогает собрать приложение с видео на Remotion: от простой формы с рендером до редактора. Пригодится, если делаете SaaS с генерацией видео.

Установить в Codex · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add openai/plugins --skill remotion-saas -a codex
Открыть на GitHub

Что делает 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 codex

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

.agents/skills/remotion-saas/SKILL.md

Для всех проектов — ~/.agents/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

Похожие скиллы

Всё по теме «Фронтенд и UI» →
remotion-render 101-skills Скилл отдаёт TSX-компонент Remotion в inference.sh и получает готовый MP4. Пригодится, когда видео нужно собирать кодом, а не руками в редакторе. CX Codex +1 109 700установок remotion vercel-labs Скилл превращает JSON-описания видеотайм-лайна в готовые видеокомпозиции через Remotion. Пригодится, если генерируешь видео программно или собираешь каталоги видеоклипов из данных. CX Codex +1 1 700установок remotion-best-practices remotion-dev Маршрутизирует задачи Remotion к подходящим инструкциям для создания видео, React-разметки, карт, мультимедиа и рендера. CX Codex +1 684 500установок remotion-create remotion-dev Скилл разворачивает новый проект Remotion и пишет первую композицию на React. Пригодится, когда нужно собрать видео кодом, а не в редакторе. CX Codex +1 214 000установок remotion-video-creation affaan-m Скилл подсказывает агенту правила работы с Remotion в React: от анимаций и звука до субтитров, графиков и переходов. Пригодится при сборке видео из React-компонентов. CX Codex +1 4 900установок remotion-video iart-ai Скилл для сборки MP4, GIF и WebM прямо в React: каждый кадр — чистая функция от useCurrentFrame, поэтому рендер детерминированный и повторяемый. CX Codex +1 2 600установок

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

Весь набор →
build-report Собирает аналитические отчёты с выводами, таблицами и визуализациями для руководителей, продакт-менеджеров или технических команд. CX Codex GP ChatGPT 4установок define-security-policy Скилл помогает составить, проверить или обновить файлы SECURITY.md, чтобы задать границы проверок сканера Codex Security. CX Codex GP ChatGPT 4установок sandbox-sdk Скилл описывает работу с Cloudflare Sandbox SDK: запуск команд и кода в изолированной среде, операции с файлами и preview URL. Пригодится для исполнения кода через Cloudflare Workers. CX Codex GP ChatGPT 4установок circleci-cli Скилл помогает управлять пайплайнами CircleCI через терминальную утилиту circleci. Пригодится для проверки статусов, валидации конфигов и точечного перезапуска сборок. CX Codex GP ChatGPT 4установок ngs-amplicon-microbiome Скилл для анализа маркерных генов из ампликонных FASTQ: 16S, 18S, ITS, COI. Запускает пайплайны nf-core/ampliseq, QIIME2 и DADA2. CX Codex GP ChatGPT 3установок gsap Справочник по GSAP для агента: твины, таймлайны, easing и производительность. Пригодится, когда пишете анимацию в композициях HyperFrames. CX Codex GP ChatGPT 3установок wrangler Скилл для Codex и ChatGPT, который заставляет агента сверяться с документацией Cloudflare перед запуском команд wrangler. CX Codex GP ChatGPT 3установок microfrontends Разбивает большое приложение на независимо деплоящиеся части, которые для пользователя выглядят одним сайтом. Полезен, когда фронтенд делят между командами. CX Codex GP ChatGPT 2установок

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

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