1仕組みと動作原理
全編を通じた唯一の鉄則：残り時間は必ず権威あるクロックから算出し、state に格納した残り時間をデクリメントすることは固く禁じます。
skills/countdown-video/SKILL.md
Never store remaining time in state and decrement it. Recompute it every frame.
ここでの目的：「ドリフト」をパラメータ調整の問題から構造設計の問題へと変えること。毎フレーム再計算することで遅延フレームも自動自己修復され、誤差が累積しません。この鉄則は端数処理の方針と検証アサーションも同時に決定します。
setInterval がドリフトするメカニズム上の理由を解説します（コールバックのトリガーが少なくとも 1000ms 遅れ、タブの間引きやレンダリングフレームの遅延時にその遅れが累積するため）。
skills/countdown-video/SKILL.md
A `setInterval(fn, 1000)` countdown **drifts** — the callback fires *at least* 1000 ms later, never exactly, and stacks up when the tab is throttled or a render frame is slow.
ここでの目的：「経験則的に良くない」ではなく動作メカニズムを示すことで、エージェントがルールを丸暗記するのではなく、rAF / Date.now 派生パターンに遭遇した際も自ら正しい実装を導き出せるようにします。
Remotion 側で信頼できるクロックは useCurrentFrame() です。第 N フレームは厳密に N/fps 秒と等しいため、「フレーム精度」が構造的に成り立ちます。
skills/countdown-video/SKILL.md
`useCurrentFrame()` is deterministic: frame N is always rendered at exactly `N/fps` seconds.
ここでの目的：レンダラーの決定性を信頼できる前提として扱います。ただし、端数の境界値については静止画フレームによる検証が引き続き必須です（verify セクションおよび完了チェックリストの項目 2 に対応）。
端数処理には ceil を用いて 0 にクランプし、「1」が丸々 1 秒間表示され、最終フレームが正確に 00:00 で止まるようにします。
skills/countdown-video/SKILL.md
const remaining = Math.max(0, Math.ceil(durationInSeconds - elapsed));
ここでの目的：ceil を用いた 1 行の処理が、視覚的な見栄え（ceil がないと数字が早く切り替わってしまう）と検証アサーション（最終フレームの値）の双方を決定づけます。本スキルで最も価値の高い 1 行です。
再生時間は定数ではなく prop とし、durationInFrames と連動させることで、カウントダウンが 00:00 に到達した後に余分なフレームが残らないようにします。
skills/countdown-video/SKILL.md
Set the composition's `durationInFrames` to `durationInSeconds * fps` so the video is exactly as long as the countdown.
ここでの目的：入力を 1 つ切り替えるだけで、同一コンポーネントを 5 分間の配信カウントダウンにも 30 秒のセール用カウントダウンにも対応させます。reference の登録例は `durationInFrames={DURATION_SECONDS * FPS}` です。
Web（非レンダリング）環境の実行パスでは rAF を用いて performance.now() を駆動させ、表示秒が変化した瞬間にのみ再描画します。
skills/countdown-video/SKILL.md
if (remaining !== lastShown) { render(remaining); lastShown = remaining; }
ここでの目的：1Hz の数字更新に対して 60Hz で再描画すべきではありません。「フレーム駆動」の正しさをレンダリング環境からブラウザ環境へと移植します。
フォントレイヤーには tabular-nums を適用して等幅化し、数字の変動によるレイアウトのズレを防止します。
skills/countdown-video/SKILL.md
Always set `font-variant-numeric: tabular-nums` (or a monospace digit font) so digits keep equal width and the layout does not jitter as numbers change.
ここでの目的：カウントダウンで最も安っぽく見える原因（数字の幅の変化によるコンポーネント全体の揺れ）を、CSS ルール 1 つで完全に排除します。
数字アニメーションの原則は「テキスト内容ではなく位置を動かす」ことであり、CSS transition ではなくフレーム駆動で行う必要があります。
skills/countdown-video/SKILL.md
Animate the *position*, not the text content, so the change is a glide, not a pop.
ここでの目的：オドメーターの動きを変位関数として抽象化することで、本質的に決定論的な再現性を担保します。reference/digit-flip.md にはロール式と反転フラップ式の両方の完全なコンポーネントを提供しています。
配信や常駐画面では背景のシームレスなループが求められます。動きの周期がタイムラインを割り切るようにし、frame % loopFrames で参照します。
skills/countdown-video/SKILL.md
read it as `frame % loopFrames` so there is no visible seam at the wrap
ここでの目的：目視で継ぎ目を探すのではなく、「シームレス」を算術的条件（周期の割り切れ）へと落とし込みます。reference §4 にサイン波ドリフトの実装と loopFrames = fps*6 の設定例を示しています。
検収条件は数式として定義されます：第 N フレームの表示値は必ず ceil(duration − N/fps) と一致し、最終フレームは 00:00 とならなければなりません。
skills/countdown-video/SKILL.md
at frame N, displayed = ceil(durationInSeconds - N/fps) (e.g. 300s @ 30fps, frame 4500 → 150s → "02:30")
ここでの目的：「ドリフトしているか／1秒ズレているか」を再計算可能なアサーションへと変換します。エンコードを行わずとも、3 枚の静止画フレームだけで合否を確定できます。
reference ではこれらの規約を実行可能なコンポーネントへと落とし込み、固定日時へ向けた Web 向けバリアント（フレームごとの target − Date.now() 再計算 ＋ タイムゾーン処理）も提供しています。
skills/countdown-video/references/countdown-cookbook.md
Register it so `durationInFrames` matches the countdown exactly — the video ends when the timer does:
ここでの目的：ドキュメントとコードの整合性を維持します。2 つ目の適用例（カレンダーカウントダウン）により、この鉄則が動画レンダリング専用にとどまらないことを実証しています。
2コア機能
01フレーム精度の Remotion カウントダウンコンポーネント（mm:ss および dd:hh:mm:ss の両形式、先頭ゼロの除去、終了状態のホールドに対応）
02配信画面／Web ページ向けタイマー（rAF + performance.now() 駆動、秒の変化時のみ再描画）
03指定日時／時刻までのカウントダウン（target − Date.now()、reference にタイムゾーン処理を含む）
04時間フォーマットおよび「先頭のゼロ単位を省略するタイミング」のルール（mm:ss / hh:mm:ss / dd:hh:mm:ss）
052 種類の決定論的な数字アニメーション：オドメーターロール式およびスプリットフラップ（反転フラップ）式
06「starting soon」配信画面レイアウト（ブランド枠 ＋ SNS アカウント ＋ グラデーション背景）と終了状態のホールド（例：WE'RE LIVE）
07納品・検証ループ：実際の durationInSeconds を指定した静止画出力 → 数値の再計算検証 → エンコード → probe-mp4 による縦型仕様のアサーション
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx remotion still / render / compositions |
| cli | scripts/contact-sheet.sh + scripts/probe-mp4.sh（仓库根共享验证工具箱，SKILL.md 明列） |
| package | ffmpeg / ffprobe（系统依赖） |
| cli | npx -y playwright screenshot（scripts/seek-shot.sh，仓库级 Light tier 通用件） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: （SKILL.md に明記された検証ループ）`npx remotion still Countdown out/f-*.png --frame=N --pro
- 网络端点: 外部ネットワークアクセスの宣言: （任意、通常は不使用）`scripts/seek-shot.sh` が `npx -y playwright screenshot` を実行：初回のみ npm から取得
- 本地工作目录: ファイル入出力および成果物の生成: エージェントが本スキルに基づき構築する Remotion プロジェクト、ならびに out/countdown.mp4、out/demo.gif
監査ノート： 。3段階の自己証明：① 判定対象＝skills/countdown-video/（find コマンドにより、ディレクトリ内には SKILL.md、README.md、references/{countdown-cookbook.md,digit-flip.md} の 4 つの .md ファイルのみが存在し、実行可能ファイルやメディアアセットは皆無であることを確認済み）。② ディレクトリ内の動作＝ローカル書き込み（Remotion プロジェクト、out/*.mp4、静止画）＋ローカル CLI 実行（`npx remotion`、ならびにリポジトリルートの scripts/ を経由する ffmpeg/ffprobe）。skills/ 配下全体で `process.env` / `api[_-]?key` / `token` / `cookie` / `https?://` の実行時エンドポイントの検出数はすべて 0 件です。③ 唯一のネットワーク接点は公式 npm 経由でのパッケージ取得（remotion / @remotion/*、および seek-shot.sh 使用時の playwright と Chromium）のみであり、サイト内の既存 Blue 判定事例（hyperframes、general-video：公式 npm 経由の npx 取得のみでは評価を引き上げない；motion-background：同一の scripts/ 構成で Blue 判定）と同一基準です。Yellow への引き上げなし：固定公開エンドポイントへの問い合わせなし、スクレイピングなし、公式 CLI の update/check なし。Orange への引き上げなし：認証情報や環境変数の読み取りゼロ、外部への素材送信ゼロ（本スキルは音声や画像の外部アップロードを一切行いません）、サードパーティ製ミラーやプラグインサービスへの依存なし。Red 判定外：TLS ダウングレードなし、サンドボックスの無効化なし、自動化検出回避なし、任意コード実行リスクなし。追記：本スキルにおける「リアルタイムクロック」の利用にネットワーク通信は介在しません。唯一のプライバシー接点は、ユーザーがカウントダウンの対象として自身の実際のイベント日時を指定する点ですが、これはコードの振る舞いではなくコンテンツ層のデータに該当します。
5二重目の独立検証
- [ok] 「禁止 setInterval 递减」是否在 reference 的示例实现里也真的遵守（防第一遍只信 SKILL.md 的说法） — reference 全量 grep：countdown-cookbook.md 组件 `const frame = useCurrentFrame();`，注册处 `durationInFrames={DURATION_SECONDS * FPS}`；到日期的 web 组件 `Math.max(0, target - Date.now())` 每帧重算并自述 "never a decrement"；digit-flip.md 两个组件同样 `const frame = useCurrentFrame();`。setInterval 全 skill 仅作反例出现 1 次。
- [ok] 「倒计时结束时视频正好结束」是否真被约束住 — SKILL.md 明写 `durationInFrames` = `durationInSeconds * fps`；cookbook 给出 "Register it so `durationInFrames` matches the countdown exactly — the video ends when the timer does:" 的注册片段；收尾清单第 2 条把它列为验收项。文档、示例、验收三者一致，不是单向声明。
- [unlocatable] 「每分钟约丢 1 秒」的漂移量级是否有据 — SKILL.md 写 "Reports of ~1 second lost per minute are common."，但仓库内无基准脚本、无引用、无数据文件；本次为只读侦查且不运行计时实验，故不验证该数值，仅记为文档声明，不在结论中当已核事实使用。
- [ok] seek-shot.sh（Light tier）对本 skill 是否可用（防「Packaged helper」被读者误解为三条脚本都属本 skill） — scripts/README.md 把 seek-shot 归为「standalone HTML + `?t=N` harness」的 Light tier；本 skill 交付是 Remotion 组件（Heavy tier），SKILL.md 的 Packaged helper 行只点名 contact-sheet 与 probe-mp4。不存在悬空引用，也不存在被夸大的能力。
- [ok] 三仓库共享脚本是否同内容（跨包一致性） — md5 逐字节比对：contact-sheet.sh b7dcc28034c9bf8fda5d48683e54d8b5、probe-mp4.sh 167b7977c50f492014e1a6fef8c9ed12、seek-shot.sh 24a4130cd1e64874154429b0b4af12da，iart-tiktok / iart-text-message / iart-youtube 三包完全相同。
- [ok] SKILL.md 是否声称了 reference 未兑现的能力（防文档夸大） — SKILL.md 承诺的四件事——可配置 duration、mm:ss 与 dd:hh:mm:ss、drift-free 计时、无缝循环背景——在 countdown-cookbook.md 与 digit-flip.md 里各有对应实现（§1 组件、§2 到日期、§4 循环、digit-flip 两组件），逐项可定位，无空头承诺。
6結論
最適な用途： 適しているケース：配信の「starting soon / be right back」画面、セールやローンチのカウントダウン、特定フレームで厳密にゼロになる必要があるあらゆるタイマーアニメーション。また、同一のタイマーロジックを用いて MP4 のレンダリングと Web のリアルタイム表示の双方に対応させたいプロジェクトや、決定論的な再現性（同一 props で同一出力）を求める量産環境にも適しています。「エンコードコストをかける前に、まず 3 枚の静止画フレームを出力して目視・手動で数値突合を行う」というワークフローを許容できるプロジェクト向けです。
不向きな用途： 適していないケース：① 大まかなカウントダウンで十分であり、最終フレームの厳密性を重視しない簡易な動画編集。② 複雑な日付セマンティクス（複数タイムゾーンを跨ぐカレンダー、祝祭日判定、サーバーの実時刻に依存する公開カウントダウン）を要する場合——本スキルはフォーマットと端数処理のみを扱うため、業務カレンダーロジックは別途実装が必要です。③ 1 時間のカウントダウンを数秒でレンダリングしたい場合（フレーム数がそのままレンダリングコストになります）。④ ナレーションや字幕とタイマーを同期させるプロジェクト（本スキルには音声処理機能がないため、caption-animation や audiogram と併用してください）。⑤ リポジトリルートの scripts/ を含めず、単一の skill ディレクトリのみをコピーして導入する場合（contact-sheet/probe-mp4 の参照が未解決になります）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload countdown-video.tar.gz
sha256:
Option B · Copy Guide for Agent2730e6053383cccb…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 2a775336b5.