Communitygithub.com

hiwurun/remotion-saas-boilerplate

字幕の文字起こし、表示、アニメーションを行います。

remotion-saas-boilerplate とは?

このスキルは、Remotion を使用して動画内でキャプション(字幕)を処理するためのものです。キャプションは、`@remotion/captions` パッケージで定義された `Caption` 型の JSON 形式で扱われます。`text`(テキスト)、`startMs`(開始ミリ秒)、`endMs`(終了ミリ秒)などのプロパティを持ち、動画のタイムラインに正確に同期した字幕表示が可能です。主な機能として、音声・動画ファイルからの文字起こし(トランスクリプション)、既存の .srt ファイルのインポート、そして動画への字幕表示が含まれます。各機能の詳細な実装手順は、それぞれ専用のドキュメントファイル(transcribe-captions.md、display-captions.md、import-srt-captions.md)に記載されており、このスキルはそれらを読み込むエントリポイントとして機能します。処理後は、Remotion Best Practices スキルを読み込み、必要な場合は Remotion Studio を起動することが推奨されています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/hiwurun/remotion-saas-boilerplate/tree/HEAD/.agents/skills/remotion-captions

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

すべてのキャプションはJSON形式で処理する必要があります。キャプションは、以下の Caption 型を使用する必要があります。

import type { Caption } from "@remotion/captions";

定義は次のとおりです。

type Caption = {
  text: string;
  startMs: number;
  endMs: number;
  timestampMs: number | null;
  confidence: number | null;
  pageBreakAfter?: boolean;
};

キャプションの生成

動画ファイルや音声ファイルから文字起こしを行いキャプションを生成するには、transcribe-captions.md ファイルを読み込んで詳細な手順を確認してください。

キャプションの表示

動画にキャプションを表示するには、display-captions.md ファイルを読み込んで詳細な手順を確認してください。

キャプションのインポート

.srt ファイルからキャプションをインポートするには、import-srt-captions.md ファイルを読み込んで詳細な手順を確認してください。

作成後

作業が完了したら、このスキルを読み込んでください:Remotion Best Practices

まだ開いていない場合は、特に指示がない限り、Remotion Studio を開いてください。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

関連スキル