1仕組みと動作原理
映像と音声の同源性：まずStrudelトラックをオフラインで音声としてレンダリングし、各ノートイベントをそれを生成したコードトークンにマッピングします。動画はこれらのイベントによって駆動されるため、後処理の位置合わせではなく、各ハイライトが正確に自身のノートと一致します。
skills/prod-by-claude/SKILL.md
The music is rendered offline from the code, and the video is driven by Strudel's own note events, so every highlight lands on its note.
ここでの処理内容：「コード＝映像」をデータ問題として解決——音と映像が同源であるため、ズレの原因は録音自体にしか生じ得ず、アライメントによる不一致は発生しません。
録音パイプライン：record.mjs が127.0.0.1上でrecorder.htmlとnode_modulesのみを配信する静的サーバーを起動し、ミュート状態のヘッドレスChromeを使用してパートごとに個別評価を行います。各ノートのタイムスタンプ、所属パート、値、コード文字範囲をエクスポートし、トラック全体のミックス（オプションのエンディングを含む）と._scope()パートのソロステムをオフラインでレンダリングします。
skills/prod-by-claude/scripts/record.mjs
// Serves recorder.html (the pinned @strudel/web build from node_modules) on 127.0.0.1, opens it in a … // muted headless Chrome, and for the track named in <project>/video.json: … // 1. evaluates every labelled part on its own and exports each note event with its time, part,
ここでの処理内容：ヘッドレス録音は画面録画よりも安定しています——リアルタイム再生に依存せず、ジッターを防ぎ、ハイライト用のコード座標（locs）を含むイベントテーブルを同時に出力します。
オフライン一貫性の鍵：recorder.html はローカルのnode_modulesから固定バージョンの@strudel/webのみを読み込み、strudel.ccからは何も取得しません。サンプルトラックはサンプラーを使用しない純粋なシンセサイザーであるため、初回の実行で追加のサンプルネットワークリクエストは不要です。
skills/prod-by-claude/scripts/recorder.html
nothing is fetched from strudel.cc. Samples are only fetched if the track itself calls samples(...).
ここでの処理内容：録音環境を完全に固定することで、上流のウェブエディタの更新によるレンダリング結果のズレを防ぎます。
タイムラインは自動生成：build-data.mjs がStrudelのcycleを動画の秒数に換算し、window.SQ（トークンハイライト、セクション起動、ウィジェット、エネルギー曲線）を生成します。総再生時間をindex.htmlのdata-durationに書き戻し、音声の開始点をpreとして設定します。
skills/prod-by-claude/scripts/build-data.mjs
const sec = (c) => +(PRE + c * SPC).toFixed(4); // strudel cycle -> video seconds … fs.writeFileSync(path.join(project, "data/events.js"), "window.SQ = " + JSON.stringify(out) + ";\n"); … // stamp the length into index.html; the audio stays the length of the recording
ここでの処理内容：楽曲を変更しても手動でタイムラインを編集する必要はありません——bars、builds、drops、themesなどの変更は、データを再計算するだけで反映されます。
カメラワークもデフォルトで自動計画：カメラ指定がない場合、セクションの起動に合わせたフレーミング、build時のall( ブロックへのズーム、drop後の新セクション公開、終了時のサインオフへのズームアウトを自動で行います。上書きが必要な場合のみvideo.jsonにcamera行を記述します。
skills/prod-by-claude/references/video.md
Leave `camera` out to get the automatic plan: frame each part as it powers on, push in on the `all(` block during builds, reveal the newest part after a drop, pull wide after the last drop, and zoom to the sign-off.
ここでの処理内容：テンプレート付属のvideo.jsonはサンプル楽曲に合わせて調整済み（SKILL.md: 'The template already matches the example track, so skip this step when using it.'）のため、初回の実行時は変更なしで動作します。
録音品質は事後対処ではなくゲートキーパー：録音中は4小節ごとにオーディオレベルを出力して警告し、dropのピークがクリッピングなしで≤ -2 dBFSになるまで再録音を要求します。楽曲を変更した場合はステップ5〜7に戻って再録音し、video.jsonの変更のみであればステップ6〜7に戻るだけです。
skills/prod-by-claude/SKILL.md
Fix the track and record again until the drops peak at or below -2 dBFS with no clipped samples.
ここでの処理内容：再録音のコスト（32小節で約5〜7分）を明確化し、レンダリング後に確認するのではなく、エージェントに事前測定と修正を徹底させます。
2コア機能
01Strudelトラックのオフライン録音：フルミックス + 各._scope()パートのソロステム + コード座標付きノートイベントテーブル
02「コード＝映像」の演出文法：ノートに応じたトークン点灯（輪郭/ononsetフラッシュ/スパースリング/トレイル）、最初の音に伴うセクションbloom、本物のテーマ切り替え、build時のコード侵食、drop時のグラフィティASCIIストーム、エディタへの円形デコード復帰、タイピングサインオフ
03自動カメラプランニング（video.jsonのcamera行で上書き可能）、手動キーフレームではなく小節単位で制御
041080×1080 @30fps MP4出力、barsとBPMから計算された再生時間（pre + bars×240/bpm + 4.6秒）
05ワンクリックのスキャフォールディング：テンプレート、トラック、ツールスクリプトを外部依存やネットワーク通信なしで純粋なファイル操作により複製
06実行可能な検証チェックリスト：build-data が確認すべきスナップショットのタイムスタンプを直接提示し、--describe false（フレーム非アップロード）を強制
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames CLI（钉版 0.8.70，经 npx --yes 调用；check/snapshot/render/cloud render） |
| package | @strudel/web 1.3.0（AGPL-3.0，从 npm 装，不进仓库） |
| package | puppeteer-core 25.12.0 + @puppeteer/browsers 3.2.3 与 OFL 字体（@fontsource/jetbrains-mono、rubik-mono-one） |
| package | Chrome for Testing 149.0.7827.22（录音用；可用 CHROME=<path> 覆盖） |
| network | 成片构图在载入时从 jsDelivr 取 GSAP 3.14.2（故渲染并非完全离线） |
| api | HyperFrames 云渲染（可选，消耗用户账户额度，须用户显式同意才可走） |
| network | 轨道自身若调用 samples(...)，录音时会去轨道写明的采样 URL 取音频（示例轨道无采样） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: node scripts/new-project.mjs <dir>（完全ローカルのファイルコピー：テンプレート + トラック + 4つのtoolsファイル）
- 网络端点: 外部ネットワークアクセスの宣言: npm install（npmレジストリ。tools/package.jsonでバージョン固定）
- 本地工作目录: ファイル読み書きおよび成果物出力: <project-dir>内のみに限定: data/events.json, data/events.js, assets/bgm.wav, assets/st
監査ノート： 判定対象＝スキル自身のディレクトリ（SKILL.md + scripts/内の4ファイル + assets/template + サンプルトラック + references×3）。スキル固有のスクリプトは外部通信を一切行いません：record.mjs は127.0.0.1の静的サーバーにのみバインドしローカルのヘッドレスChromeを制御、recorder.html はnode_modulesからのみ@strudel/webを読み込み、build-data.mjs / new-project.mjs は完全なローカル読み書きのみを実行します。ディレクトリ内で認証情報の取得はなく（SKILL.mdに'No credentials.'と明記、process.envはCHROMEパスの取得のみ）、サードパーティへのデータ送信もありません。ネットワーク利用は次の2点に限られます：① 公式ソースからの固定バージョンインストール——npm install（npmレジストリ、package.jsonで固定）およびChrome for Testing 149.0.7827.22（公式@puppeteer/browsersインストーラー経由、約150MB、Googleストレージより取得）；② 成果物実行時の参照——コンポジション読み込み時にcdn.jsdelivr.netからGSAP 3.14.2を取得。これらはバッチ4の基準（成果物実行時の外部リンクは判定引き上げの対象外）および同リポジトリの先例（hyperframes-animation / hyperframes-coreともに青判定）に基づき、リスク昇格の対象とはなりません。クラウドレンダリングによるアカウントクレジット消費はユーザーの明示的同意に基づくオプション機能です（risksに明記、判定外）。TLSのダウングレード、検知回避、大量データスクレイピング、ローカルでの任意コード実行の余地は確認されませんでした。
5二重目の独立検証
- [ok] 『No credentials.』声明是否成立 — SKILL.md Rights/Side effects 段明写 'No credentials.'；目录内 process.env 命中只有 record.mjs 的 CHROME 与 CFG 类入参，未见 key/token/cookie/keychain 读取，也无 .env 解析。
- [discrepancy] 『录音离线』是否等于全流程离线 — 录音段确实离线（127.0.0.1 静态服务 + 本地无头 Chrome + node_modules 里的 @strudel/web；recorder.html 注释明写 nothing is fetched from strudel.cc），但建仓（npm install、Chrome for Testing 下载）与渲染期构图载入 GSAP（cdn.jsdelivr.net）都要联网。SKILL.md 自己把这些写进 Side effects，故非隐瞒；只是『离线』的适用范围仅限录音。据此把档位定为蓝（官方源固定版本安装 + 产物期 CDN，与同 repo 先例 hyperframes-animation / hyperframes-core 同口径）。
- [ok] 高亮是否真由音符事件驱动（而非后期对齐） — 链路可读通：record.mjs 导出每音符的 locs（代码字符区间）→ build-data.mjs 用 byLoc 汇总成 token 时间表与段落/widget 时间 → 写成 window.SQ → 模板 app.js 消费。音画同源成立，不是后期对轨。
- [discrepancy] 是否误把 ffmpeg 列为依赖 — 本 skill 目录内不调用 ffmpeg：录音与 mix 走 Strudel 的离线渲染器，编码由 HyperFrames CLI 负责。故 external_deps 不列 ffmpeg（同批姊妹 skill 有列，本 skill 没有）。
- [ok] 大写 S 标签的拒绝逻辑是否真在代码里 — record.mjs 实有 'const soloing = labels.filter((l) => l.length > 1 && l.startsWith("S"));' 并在命中时 fail 提示改名——不是文档空话。
- [unlocatable] 录制耗时与云渲染额度的具体数值 — 『约 5-7 分钟/32 小节』与云渲染『消耗多少额度』只有文档声明，源码内无可复现依据；本次为只读侦查，未运行录音或渲染，故不作为已核事实使用。
6結論
最適な用途： Strudelのライブコーディング楽曲を所持している（またはエージェントにreferences/composing.mdに従って作曲させたい）ユーザーで、「コード自体が演奏する」1080×1080の動画を作成したい場合に最適です。また、ポートフォリオやSNS向けコンテンツとして再現可能なビルド環境（テンプレート、データ、録音スクリプトがプロジェクト内に完結）を必要とするケースにも適しています。macOS/Linux環境でドキュメント通りに操作でき、初回は付属のサンプルトラックを用いて変更なしで動作確認が可能です。
不向きな用途： 不適合な用途：① Strudel以外のオーディオやDAWプロジェクト（明示的に対象外。他の音源はHyperFramesの音楽ワークフローを利用してください）；② 表示するコードがないビジュアライゼーション用途（既存の音声ファイルのみを可視化することは範囲外）；③ Node 22/npmの導入やChromeのダウンロードを行いたくない完全オフライン環境（録音・レンダリングの両方でローカルChromeおよびnpmパッケージが必要）；④ クラウドレンダリングのクレジット消費やネットワーク越しのレンダリングを望まないユーザー（ローカルレンダリングのみを使用し、GSAPのオンライン読み込みを許容する必要があります）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload prod-by-claude.tar.gz
sha256:
Option B · Copy Guide for Agent90eabb744789abe6…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit ba7a0bb6d3.