remotion-saas について
Remotion を使ったアプリ開発向けのスキルです。フォームからのレンダリング実行や動画エディターの構築に加え、プレビューの埋め込みとレンダリング方式の選択を扱います。
主な機能
- 01Remotion アプリの構築
- 02React アプリへのプレビュー埋め込み
- 03レンダリング方式の選択
- 04フレームワークのガイド参照
活用シーン
- 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 をご覧ください。