demotion — 從應用程式真實外觀自動建立系統示範影片
最終產出：一個 .mp4 影片（1920x1080，60 fps，1-2 分鐘），看起來像是來自真實應用程式的專業螢幕錄製，但完全由 Remotion 程式碼驅動，因此流暢（沒有真實錄製的卡頓）、可重複，且當功能變更時易於更新。
工作語言：繁體中文（回覆、總結、影片字幕）。請勿開啟 Chrome 或登入本機應用程式來「查看」UI：外觀的唯一真相來源是程式碼；結果透過 Remotion 靜態圖片/影片檢查。
不可違反的原則
- 原始 UI，而非模仿。 從應用程式程式碼複製標記 + Tailwind 類別字串 + 色彩 token + 字型。精確複製 UI 文字（標題、標籤、提示、訊息）。請勿重新繪製「相似」的版本。
- 產品正確性來自程式碼。 字幕中的每項聲明（價格、配額、預設值、限制、誰支付什麼）都必須從程式碼/配置中讀取，而非記憶或猜測。實際範例：「機器人測試是否使用配額？」→ 在撰寫字幕前檢查其 API 路由與用量記錄函數。程式中不存在的功能不得宣稱。
- 所有動作皆從影片時間計算。 無 CSS 動畫/轉場、無
setTimeout、無跨影格狀態/快取：每個影格是t的純函數。（並行渲染將影格分散到多個分頁。） - 示範資料虛構、一致且安全。 使用一個虛構的企業/人物，使用佔位電話/電子郵件/帳號，所有場景中使用相同的數字。請勿使用真實客戶資料。「經過幾天後」的統計數據應加上「範例資料」字幕。
- 時長 1-2 分鐘，除非另有要求：裁剪等待部分，加速打字/載入（3-8 倍）並加上「4x」徽章；需要閱讀的部分維持 1-2 倍。加速後字幕必須可閱讀至少 1.2 秒。
- 肉眼驗證：在關鍵時刻渲染靜態圖片並「查看」（讀取圖片）之後再進行最終渲染。
工作流程
第 0 階段 — 偵測與目標
- 尋找已存在的示範：
**/src/demo/kit/stage.tsx。** 存在 →** 不要重新建立框架；進入「更新示範」。 - 不存在 → 需要影片專案。預設位置：
<repo>/video/（獨立資料夾；若儲存庫使用 Next/ESLint，則將其加入根目錄 tsconfig 的exclude與 ESLint 的globalIgnores，以免應用程式建置/CI 檢查它）。 - 僅一次詢問無法推斷的項目：目標時長、是否需要音效/旁白、必須顯示的部分。預設：繁體中文字幕、無音效、≤2 分鐘、從零開始到主要功能的使用者旅程。
第 1 階段 — 產品研究（閱讀程式碼，不要猜測）
針對將顯示的每個頁面/功能，閱讀：路由（app/**/page.tsx）、元件、UI 文字、套裝/價格/配額、預設規則、限制、導覽/引導文字（這是產品知識的最佳來源）、付款流程、角色。記錄在 referensi/storyboard.md，格式為：頁面 → 展示內容 → 字幕 → 已驗證的聲明（檔案:行號）。必要時可將大量程式碼閱讀分派給子代理 Explore；最終決定仍在您手中。
第 2 階段 — 故事板
依照使用者旅程（登陸頁面 → 註冊 → 開始/引導 → 核心設定 → 「哇」時刻 → 監控 → 付款/訂閱 → 呼籲行動）安排 8-14 個場景。每個場景：目標、原始時長、滑鼠步驟、字幕。參考 referensi/storyboard.md（字幕模式、節奏、章節標籤「N · 名稱」）。
第 3 階段 — 建立框架
node "$HOME/.claude/skills/demotion/skrip/scaffold.mjs" --dest <repo>/video --nama "產品" --domain 產品.com --aksen "#3ddc97" --install
複製引擎（src/demo/kit/*）、Root 框架、範例場景、Tailwind v4 配置。然後：
- 將應用程式的 CSS 色彩 token + 元件類別 複製到
src/demo/index.css（移除動畫/轉場）。 - 將
src/demo/fonts.ts中的字型替換為應用程式使用的字型（@fontsource/<名稱>）；載入所有使用的字重。 - 在
config.ts中填入BRAND（名稱、網域、深色背景上的強調色）。 - 測試：
REMOTION_FPS=30 npx remotion still src/demo/index.ts S-範例 out/uji.png --frame=270 --config=remotion.demo.config.ts。 在擁有真實場景後刪除scenes/contoh.tsx。
第 4 階段 — 移植 UI 與撰寫場景
- 產品元件 →
src/demo/pages/*.tsx（複製標記/類別；將資料與處理程序替換為靜態 props）。通用原子元件位於kit/atoms.tsx；WhatsApp 手機位於kit/phone.tsx。 - 一個場景 = 一個檔案
scenes/<id>.tsx，匯出DUR（原始秒數）與元件；在scenes/index.ts中使用buat("<id>", Komp, DUR_X)註冊。完整模式：templat/src/scenes/contoh.tsx與referensi/arsitektur.md（Stage API：游標/滾動/相機/聚光燈，data-cur，與T一起的時間事件）。 - 側邊欄/模態框/引導 =
fixed圖層（不隨內容滾動），頁面內容為 children。 - 場景 ≥6 且獨立 → 使用 fork 進行平行處理（參考
referensi/brief-fork.md）；共用框架（資料、多場景使用的頁面）由您先撰寫。
第 5 階段 — 裁剪與加速
在所有場景以 1 倍速正確之後，填入 scenes/potong.ts（每個場景的區段 S(a,b,v)）。使用 npx remotion compositions src/demo/index.ts --config=remotion.demo.config.ts 檢查總時長（Demo 的時長欄位）。
第 6 階段 — 驗證
npx tsc --noEmit -p tsconfig.json- 低成本預覽：
REMOTION_FPS=30 npx remotion render src/demo/index.ts Demo out/preview.mp4 --config=remotion.demo.config.ts --crf=26 --scale=0.5 --concurrency=10 --gl=angle - 聯繫頁：
python "$HOME/.claude/skills/demotion/skrip/lembar-kontak.py" out/preview.mp4 --tiap 5然後讀取圖片。 - 檢查：文字被截斷、字幕遮蓋點擊的按鈕、游標錯位、數字不一致、聲明不正確、版面跳躍、空白/過長的時刻。
第 7 階段 — 最終渲染與傳送
powershell -File "$HOME/.claude/skills/demotion/skrip/bersihkan-proses.ps1" # 若有舊渲染必須執行（若使用者正在使用 Studio，則加上 -JanganStudio）
cd <repo>/video && REMOTION_FPS=60 npx remotion render src/demo/index.ts Demo out/demo.mp4 --config=remotion.demo.config.ts --codec=h264 --crf=17 --concurrency=10 --gl=angle
在背景執行（run_in_background），不設小 timeout。預估：約 12-18 影格/秒（GPU），2 分鐘 60 fps = 7,000 影格 ≈ 8 分鐘。完成後 → 使用 ffprobe 檢查（時長、1920x1080、60 fps）加上一個影格，然後若檔案 >30 MB，執行 node ".../skrip/kompres.mjs" out/demo.mp4 out/demo-ringan.mp4 --crf 24，並使用 SendUserFile 傳送（限制 30 MB；完整檔案仍在磁碟上，通知使用者）。
更新現有示範
使用 git diff/git log 查看已變更的頁面/文字 → 僅更新相關的場景與 pages/*（從程式碼重新複製標記），再次檢查字幕聲明，調整 potong.ts，驗證該場景的靜態圖片，然後完整重新渲染。
曾經發生的陷阱（開始前請閱讀 referensi/jebakan.md）
React is not defined（模組層級的 JSX）· 跨影格快取導致游標跳躍 · 孤立渲染程序耗盡 CPU · blur/backdrop-filter 使渲染慢 3 倍 · Tailwind 斷點使用無頭視窗寬度 · sticky 在滾動內容中失效 · 平行渲染 + 未完成的檔案破壞套件 · Remotion 的 ffmpeg 缺少 fps/tile 濾鏡 · 錯誤的功能聲明被使用者發現。
此技能中的參考資料
referensi/arsitektur.md— 引擎 API（Stage、游標/滾動/相機/聚光燈步驟、時間對應、工具包）referensi/jebakan.md— 陷阱清單與解決方案referensi/storyboard.md— 如何安排場景、字幕、節奏、研究清單referensi/brief-fork.md— 使用子代理 fork 平行撰寫場景的簡報範本referensi/render.md— 渲染命令、速度、GPU、壓縮、傳送templat/— 框架複製的程式碼 ·skrip/— 框架建立、清理程序、聯繫頁、壓縮- 13 個場景的實際範例（登陸頁面 + 滾動、聚光燈引導 + 對話框、手機掃描 QR、儀表板與手機分屏、頁面切換 + 付款）來自作者專案 ChatGerCep；模式位於
templat/src/scenes/contoh.tsx與referensi/arsitektur.md。