Communitygithub.com

Guilhermeslvg/video-portfolio

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

video-portfolio とは?

このスキルは、Remotion を使用して動画内に字幕を処理するための包括的なガイドです。 主な機能は、動画や音声ファイルから字幕を文字起こしする方法、生成された字幕を動画内に表示・アニメーションさせる方法、そして .srt ファイルから字幕をインポートする方法の3つです。 各機能は独立したマークダウンファイル(transcribe-captions.md、display-captions.md、import-srt-captions.md)に詳細な手順が記載されており、開発者は自身のプロジェクトに合わせて必要な部分だけを参照できます。 字幕データは Remotion の標準的な `Caption` 型(text, startMs, endMs, timestampMs, confidence, pageBreakAfter を含む)で扱われ、JSON 形式で処理されます。 このスキルは主に Claude Code や Cursor などの AI エージェントと組み合わせて Remotion Studio での作業を効率化するために設計されており、字幕関連の処理を自動化・標準化したい開発者に役立ちます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Guilhermeslvg/video-portfolio/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 ベストプラクティス

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

Individual skills in this repo

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

関連スキル