VisroliyaHimanshu/jsxreel

jsxreel は何をしますか？

概要

ここでの動画は、Remotionでアニメーション化されたReactシーンに、ElevenLabsが音声を吹き込み、すべてのビートが話し言葉に合わせてタイミング調整されています。アプリやベンダーのUIは常に再構築され、スクリーンショット、画面録画、ストーリーボードのスライドショーとして表示されることはありません。提供された画像がコンテンツそのもの（署名、ロゴ、商品写真）である場合、画像として表示されることがあります。各プロダクトは独自のビデオプロジェクトと独自の外観を保持します。このスキルは、このスキルのベースディレクトリ（スキル読み込み時に表示）にある scripts/ 内のプロセスとツールを保持します。

プロジェクト

~/.claude/jsxreel/projects.md が存在する場合は最初に読み込んでください（ユーザーのプライベートリストであり、スキルの外部に保存されているため、更新は決してスキルに影響しません：フォルダ、読むべきメモ、音声コマンド、規約）。次に、そのプロジェクトの独自のメモを読み込んでください。リストにないプロジェクト：ユーザーにその場所を尋ね、そこに行を追加してください。

新規プロジェクト：プロダクトのリポジトリ内のRemotionプロジェクトで、scripts/tts.mjs と scripts/stills.mjs をこのスキルからコピーしてください（stills.mjs は qa/ に配置）。他のプロダクトのビジュアルを決して使用しないでください。

ワークフロー

1. 種類： アプリガイド、ストーリーボード告知、プロモーションリール。kinds.md の該当セクションを読んでください。
2. 質問： AskUserQuestion（最初に推奨、最大4つまで）を使用して、フォーマット、目標長さ、エンディング、およびマテリアルとプロジェクトノートだけでは回答できないものについて質問してください。
3. マテリアルの事前確認： ストーリーボードのコピー（誤った技術的主張、ダッシュ、ナレーションとして長すぎるテキスト）；オンスクリーンの各指示（メニューパス、ラベル）をベンダーの現在のドキュメントまたはアプリのコードと照合；提供されたアセット内の個人データ。ユーザーが提供したものを使用し、問題があればフラグを立てて質問してください。静かにすり替えないでください。秘密情報（本物のQRコード、トークン、パスワード）は決して画面に表示しないでください。ダミーを描画してください。
4. スクリプト scripts/<video>.json：シーンごとに1行、すべてのビートに marks（正確で、大文字小文字を区別するフレーズ、その行内で一意）、say に発話形（数字、URL）を指定。約 2.6 語/秒 + シーンあたり 0.5 秒を予算としてください。スクリプト全体を表として表示し、承認後にのみクレジットを消費してください。
5. 音声： 音声ごとに1テイク、アライメントでカット（1人のナレーターの場合は node scripts/tts.mjs <video>）。クリップを文字起こし（ElevenLabs音声テキスト変換、POST /v1/speech-to-text、モデル scribe_v1、またはプロジェクト独自のツール）して、各クリップが独自の単語を保持していることを確認してください（1テイクあたり数セントのコスト）。その後、タイトニング：python3 -I <skill dir>/scripts/tighten.py "$PWD" <video> <prefix>（オリジナルは .voice-orig/ に保存、--help を参照）。リールの場合は代わりにコミックポーズを保持してください。クラウドセッションでは、ElevenLabsキーはネットワークシークレットから取得されます（ELEVENLABS_API_KEY=proxy、READMEのブラウザセクションを参照）。ユーザーにチャットでキーを貼り付けるよう依頼しないでください。
6. ビルド： data.ts、timeline.ts、シーン、CSS（新しいクラスプレフィックスを付けて独自のファイルに）。シーン長 = max(MIN, LEAD + clip + TAIL)、LEAD 約 0.15、TAIL 約 0.2；MIN はシーンの最後のイベント + 0.6 秒をカバー；クリックデモでは、最初のクリック前にUIが表示されるように LEAD を長めに設定。Root.tsx に登録し、voice:/render: スクリプトを追加し、プロジェクトのノート（README または計画）にビデオを記録。
7. QA（下記）、その後 報告：絶対 mp4 パス、目標に対する長さ、確認すべき前提（サンプルデータ、再構築されたUIラベル、承認された変更行、新旧比較）、耳で確認する項目。求められた場合のみコミット。

QA

• npx tsc --noEmit；node qa/stills.mjs <Comp> <frames…>（編集後の最初の呼び出しがクラッシュした場合は再実行）。
• すべてのタップまたはクリックの押下フレームを、1枚のコンタクトシートに重ねて表示：指またはカーソルがターゲット上にあること。
• 各トランジションの前後4～5フレーム。
• ffprobe 長さ；プロジェクトごとのラウドネス（ガイド：平均約 -21 dB；ソーシャル：約 -14 LUFS、ピーク最大 -0.8 dB）；意図的なコミックビートではない約 1.3 秒以上のギャップを silencedetect で検出。
• 共有ファイルを変更した場合：過去のビデオのフレームをレンダリングし、PSNR が inf であることを確認。
• QA PNG を削除。

よくある間違い

間違い	修正方法
ElevenLabsの自然なペーシング	ユーザーは遅いと感じる。最初のレンダリング前にタイトニング。
UIラベルの確認前に録音	最初にベンダーのドキュメントまたはアプリコードを確認。リテイクにはクレジットがかかる。
1行に1つのTTSリクエスト	行間で音声が変わる。音声ごとに1テイク。
ハードコードされたビートタイム	マークを使用。新しいテイクで全てのタイミングが再調整される。
アライメントを盲信	eleven_v3 ではダイアログが約 0.75 秒ずれることがある。クリップを文字起こし。
別プロジェクトのルック	各プロダクトは独自のキットを持つ。ストーリーボードは独自のルックを維持。
呼び出し元の style が transform を設定するラッパーに広がる	呼び出し元の transform が優先され、スケールが失われる。呼び出し元のスタイルは外側の div に配置。
zsh：$LIST が単語分割されず、==== がエラーに	インラインリスト。ffmpeg フィルタは Python で構築。
ポート3000が使用中	空き --port を使用。
マシンにChromeがない	任意のChromiumブラウザで動作（Chromium、Edge、Brave、--browser-executable で指定）。ブラウザがない場合、フラグを省略するとRemotionが独自のヘッドレスChromeをダウンロード。stills.mjs は自動で選択。FirefoxとSafariはレンダリング不可。
レポートに手打ちURL	ローカルパスのみ。