remotion-saas について
remotion-saas は、簡単なレンダリングフォームから複雑なエディターまで、Remotion を使った動画アプリ構築を支援するスキルです。SaaS テンプレート、プレビューの埋め込み、レンダリング方式の選択を扱います。
主な機能
- 01SaaS テンプレートとフレームワークの選択ガイド
- 02React アプリへの Remotion プレビュー埋め込み
- 03クライアント側・サーバー側レンダリングの案内
- 04Vue、Angular、Svelte の利用ガイド
活用シーン
- 01動画 SaaS の土台となるテンプレートの選定
- 02React アプリへの Remotion プレビュー追加
- 03レンダリング方式の選択
- 04Vue、Angular、Svelte での Remotion 利用
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/remotion-saasを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
framework.mdplayer.mdrendering.mdagents/openai.yamlassets/remotion-icon.svg詳細
Remotionを使ってアプリを構築できます。
シンプルなフォームをレンダリングに接続することも、複雑な動画エディターを作成することもできます。
テンプレートまたはフレームワークの選択
SaaS向けのテンプレートをいくつか用意しており、クローンして利用したり、参考にしたりできます。 テンプレートまたはフレームワークの選択については、フレームワークの選択をご覧ください。
<Player>
このコンポーネントを使うと、RemotionのプレビューをReactアプリに埋め込めます。Playerの詳細については、Playerをご覧ください。
レンダリング
クライアントサイドとサーバーサイドのレンダリング方法を利用できます。選択方法や、Lambda、Vercel、Node.js、Cloudflareの各オプションについては、レンダリングをご覧ください。
Vueの場合
RemotionをVueで使用する方法については、https://www.remotion.dev/docs/vue.md をご覧ください。
Angular
RemotionをAngularで使用する方法については、https://www.remotion.dev/docs/angular.md をご覧ください。
Svelte
RemotionをSvelteで使用する方法については、https://www.remotion.dev/docs/svelte.md をご覧ください。