jsxreel 是做什麼的？
概述
這裡的影片，是透過 Remotion 將 React 場景製作成動畫，並使用 ElevenLabs 進行配音，每個節拍都與口語詞語精確同步。應用程式和供應商的 UI 始終以程式碼重建，絕不顯示為螢幕截圖、螢幕錄製或故事板的幻燈片。如果提供的圖片本身即是內容（例如簽名、標誌、產品照片），則可以作為圖片顯示。每個產品都維護自己的影片專案和視覺風格；此技能包含流程和 scripts/ 目錄中的工具，該目錄位於此技能的基本目錄（在技能載入時顯示）。
專案
如果 ~/.claude/jsxreel/projects.md 存在，請先讀取它（使用者私人列表，存放在技能外部，因此更新不會影響它：包含資料夾、要閱讀的筆記、語音命令、慣例）。然後讀取該專案自己的筆記。未列出的專案：詢問使用者它所在的位置，然後在該處新增一行。
新專案：一個位於產品儲存庫中的 Remotion 專案，包含從此技能複製的 scripts/tts.mjs 和 scripts/stills.mjs（stills.mjs 放在 qa/ 目錄中）。切勿使用其他產品的視覺素材。
工作流程
- 類型： 應用指南、故事板公告或宣傳短劇。閱讀其在
kinds.md中的章節。 - 提問 使用 AskUserQuestion（建議優先使用，最多 4 個）：格式、目標長度、結尾，以及僅限於素材和專案筆記無法回答的問題。
- 撰寫前檢查素材： 故事板副本（錯誤的技術主張、破折號、文字過長無法配音）；每個螢幕上的指示（選單路徑、標籤）需與供應商當前文件或應用程式程式碼核對；已提供素材中的個人資料。使用使用者提供的內容，標記問題，並提出詢問。切勿悄悄替換。機密（如真實 QR 碼、令牌、密碼）絕不顯示在螢幕上；應繪製一個範例。
- 腳本
scripts/<video>.json：每個場景一行，marks標記每個節拍（精確、區分大小寫的短語，在其行中唯一），say用於口語形式（數字、網址）。預算約為每秒 2.6 個單詞，加上每個場景 0.5 秒。以表格形式顯示整個腳本；僅在批准後才花費積分。 - 語音： 每個語音一次錄製，透過對齊剪輯（對一個旁白者執行
node scripts/tts.mjs <video>）。轉錄這些剪輯（使用 ElevenLabs 語音轉文字，POST /v1/speech-to-text，模型scribe_v1，或專案自己的工具）以確認每個片段包含其自己的單詞；每次錄製花費幾美分。然後調整時間：python3 -I <skill dir>/scripts/tighten.py "$PWD" <video> <prefix>（原始檔案保留在.voice-orig/中，請參閱--help）。短劇則保留其喜劇性停頓。在雲端會話中，ElevenLabs 金鑰來自網路密鑰（ELEVENLABS_API_KEY=proxy，請參閱 README 的瀏覽器部分）；切勿要求使用者將金鑰貼入聊天中。 - 建置：
data.ts、timeline.ts、場景，以及使用新的類別前綴的獨立 CSS 檔案。場景長度 = max(MIN, LEAD + clip + TAIL)，LEAD 約為 0.15，TAIL 約為 0.2；MIN 涵蓋場景的最後事件加 0.6 秒；點擊示範會獲得較長的 LEAD，以便在第一次點擊前 UI 可見。在Root.tsx中註冊，新增voice:/render:腳本，並在專案筆記（README 或計劃）中記錄影片資訊。 - 品質保證（如下），然後報告：絕對的 mp4 路徑、與目標長度的比較、需要確認的假設（範例資料、重建的 UI 標籤、任何已批准但你修改過的行，新舊並列顯示）、需要透過聽覺檢查的內容。僅在要求時才提交。
品質保證
npx tsc --noEmit；node qa/stills.mjs <Comp> <frames…>（如果編輯後的第一次呼叫崩潰，請重新執行）。- 每次點擊或點擊動作在其按下影格上，堆疊在一張連絡人表中：手指或游標位於目標上。
- 每個轉場之間有 4 到 5 個影格。
- ffprobe 長度；每個專案的響度（指南：平均約 -21 dB；社群媒體：約 -14 LUFS，峰值最多 -0.8 dB）；使用 silencedetect 檢測超過約 1.3 秒且非故意喜劇節拍的間隙。
- 更改了共享檔案：渲染較舊影片的影格，PSNR 必須為
inf。 - 刪除 QA 生成的 PNG 檔案。
常見錯誤
| 錯誤 | 修正方式 |
|---|---|
| ElevenLabs 自然節奏 | 使用者覺得太慢。在首次渲染前調整時間。 |
| 在檢查 UI 標籤前錄製 | 先檢查供應商文件或應用程式程式碼；重新錄製會花費積分。 |
| 每行發送一個 TTS 請求 | 語音在行與行之間會改變。每個語音一次錄製。 |
| 硬編碼的節拍時間 | 使用 Marks；新的錄製會重新調整所有時間。 |
| 盲目信任對齊 | eleven_v3 對話可能漂移約 0.75 秒。轉錄剪輯。 |
| 使用另一個專案的外觀 | 每個產品有自己的套件；故事板保持其自身外觀。 |
呼叫者的 style 傳播到設定 transform 的包裝器上 | 呼叫者的 transform 會勝出，導致縮放丟失。將呼叫者的樣式放在一個外層 div 上。 |
zsh：$LIST 不會進行單詞分割，==== 是錯誤 | 使用內聯列表；在 Python 中建構 ffmpeg 過濾器。 |
| port 3000 已被佔用 | 使用一個空閒的 --port。 |
| 機器上沒有 Chrome | 任何 Chromium 瀏覽器都可以使用（Chromium、Edge、Brave，透過 --browser-executable）；如果沒有，省略該標誌，Remotion 會下載自己的無頭 Chrome。stills.mjs 會自行選擇。Firefox 和 Safari 無法渲染。 |
| 報告中手動輸入的 URL | 僅使用本地路徑。 |