remotion-saas について
Remotionを使ったアプリ開発を扱うスキルです。レンダリングにつなぐ簡単なフォームから動画エディターまでを対象とし、Reactへのプレビュー埋め込み、レンダリング方式の選択、Vue・Angular・Svelteの資料を紹介します。
主な機能
- 01Remotionのレンダリングを使ったアプリ開発
- 02ReactへのRemotionプレビュー埋め込み
- 03クライアント側・サーバー側のレンダリング選択
- 04Vue・Angular・Svelteの参考資料
活用シーン
- 01レンダリングを開始するフォームの構築
- 02動画エディターを備えたアプリの開発
- 03Reactアプリへの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 をご覧ください。