rendydev404/demotion

demotion — 実際のアプリケーション UI からの自動システムデモ

最終成果物: プロフェッショナルなアプリケーションのスクリーン録画のように見える 1 つの .mp4（1920x1080、60 fps、1〜2 分）ですが、完全に Remotion コードで駆動されているため、実際の録画のようなカクつきがなく、繰り返し可能で、機能が変わったときに簡単に更新できます。

使用言語: インドネシア語（応答、要約、動画キャプション）。UI を「見る」ために Chrome を開いたりローカルアプリにログインしたりしないでください。UI の真実の情報源はコードです。結果は Remotion のスチル/動画で確認します。

絶対に破ってはいけない原則

1. 本物の UI、模倣ではない。 アプリケーションコードからマークアップ、Tailwind クラス文字列、カラートークン、フォントをコピーします。UI テキスト（タイトル、ラベル、ヒント、メッセージ）はそのままコピーします。「似せて」描き直さないでください。
2. 製品の正確性はコードから。 キャプション内のすべての主張（価格、容量、デフォルト、制限、誰が何を支払うか）は、コード/設定から読み取り、記憶や推測に基づかないでください。実際の例: 「ボットテストは容量を使う？」→ キャプションを書く前に API ルートと使用量記録関数を確認します。コードにないことは主張しないでください。
3. すべての動きは動画の時間から計算されます。 CSS アニメーション/トランジション、setTimeout、フレーム間のステート/キャッシュは使用しません。各フレームは t の純粋関数です（並列レンダリングはフレームを複数のタブに分割します）。
4. デモデータは架空、一貫性、安全。 1 つの架空の事業/人物、プレースホルダーの番号/メール/口座、すべてのシーンで同じ数字を使用します。実際の顧客データは使用しないでください。「数日後」の統計には「サンプルデータ」というキャプションを付けます。
5. 特に指定がない限り、長さは 1〜2 分。 待機部分をカットし、タイピング/読み込みを 3〜8 倍に高速化し、「4x」バッジを表示します。読む必要がある部分は 1〜2 倍のままにします。キャプションは高速化後も 1.2 秒以上読めるようにします。
6. 目で確認する。 キーモーメントごとにスチルをレンダリングし、最終レンダリングの前に見て（画像を読んで）確認します。

ワークフロー

フェーズ 0 — 検出と目標

• 既存のデモを探す: **/src/demo/kit/stage.tsx。** あれば **→ 足場を再作成せず、「デモの更新」に入ります。
• ない場合 → 動画プロジェクトが必要。デフォルトの場所: <repo>/video/（別のフォルダ; リポジトリが Next/ESLint を使用している場合、アプリのビルド/CI がチェックしないように、ルートの tsconfig の exclude と ESLint の globalIgnores に追加します）。
• 推測できないことだけを1 回だけ尋ねる: 目標時間、音声/ナレーションの有無、必ず表示する必要がある部分。デフォルト: インドネシア語のキャプション、音声なし、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 "Produk" --domain produk.com --aksen "#3ddc97" --install

エンジン（src/demo/kit/*）、ルートフレームワーク、サンプルシーン、Tailwind v4 設定をコピーします。その後:

• アプリケーションの CSS からカラートークンとコンポーネントクラスを src/demo/index.css にコピーします（アニメーション/トランジションは削除）。
• src/demo/fonts.ts のフォントをアプリケーションが使用しているフォント（@fontsource/<名前>）に変更し、使用するすべてのウェイトをロードします。
• config.ts の BRAND を入力します（名前、ドメイン、ダーク背景でのアクセントカラー）。
• テスト: REMOTION_FPS=30 npx remotion still src/demo/index.ts S-contoh 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 にあります。
• 1 シーン = DUR（元の秒数）とコンポーネントをエクスポートする 1 つのファイル scenes/<id>.tsx。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 — 検証

1. npx tsc --noEmit -p tsconfig.json
2. 簡易プレビュー: 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
3. コンタクトシート: python "$HOME/.claude/skills/demotion/skrip/lembar-kontak.py" out/preview.mp4 --tiap 5 を実行し、画像を読む。
4. 確認: テキストの切れ、クリックするボタンを隠すキャプション、カーソルの位置ずれ、数字の不一致、誤った主張、レイアウトのジャンプ、空白または長すぎる瞬間。

フェーズ 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）+ 1 フレームを確認し、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 にあります。