remotion-saas — Claude skill: build apps with Remotion
Guides you through building a Remotion app, from a simple form that triggers a render to a full video editor. Useful for SaaS products that output video.
npx skills add openai/plugins --skill remotion-saas -a codexWhat remotion-saas does
This skill covers how to build apps with Remotion. A basic form wired to a render is one option; a complex video editor is another. Both are in scope.
The material is split by topic. There is help choosing a SaaS template or framework, notes on the <Player> component for embedding a Remotion preview in a React app, and a comparison of client-side versus server-side rendering. On the server side it points to Lambda, Vercel, Node.js and Cloudflare. Separate pointers cover Remotion with Vue, Angular and Svelte.
It targets Claude and Claude, so on other agents you install it by hand at the platform's own skill path. If your project already leans on server-side rendering, read the client-versus-server section first — that decision shapes the rest of the setup.
What it helps with
- ship a SaaS where a form submission produces a finished video
- embed a Remotion preview inside a React app
- decide between client-side and server-side rendering
- pick a starting template for a video product
- wire Remotion into Vue, Angular or Svelte
Example prompts for the agent
- help me pick a Remotion template for a SaaS with a form and a render
- how do I embed <Player> in my React component
- compare server-side rendering on Lambda and Node.js
How to install remotion-saas
1Skills CLI (Vercel)
npx skills add openai/plugins --skill remotion-saas -a codex2Manually: put the files in place
.agents/skills/remotion-saas/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add openai/plugins --skill remotion-saas -a claude-code2Manually: put the files in place
~/.claude/skills/remotion-saas/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/remotion-saas/
Manually: put the files in place
.cursor/skills/remotion-saas/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install openai/plugins remotion-saas2Manually: put the files in place
.github/skills/remotion-saas/SKILL.mdPlatform CLI
gemini skills install https://github.com/openai/plugins --path plugins/remotion/skills/remotion-saasManually: put the files in place
.devin/skills/remotion-saas/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: Codex skills: how to install, where they live, how to call them
Questions about remotion-saas
How do I install remotion-saas in Claude?
Run npx skills add openai/plugins --skill remotion-saas, then npx skills add openai/plugins --skill remotion-saas -a codex. The skill then lives at .agents/skills/remotion-saas/SKILL.md.
What does remotion-saas do?
It guides you through building Remotion apps: SaaS templates, the <Player> component, and rendering options.
Which frameworks does remotion-saas cover?
React is the main path, with separate pointers for Vue, Angular and Svelte.
Source text
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
