Content & Media Creation · heygen-com/hyperframes-community-skills
prod-by-claude
Use when an agent needs to make a HyperFrames video of a Strudel live-coding track, where the code itself is the picture and every token lights up on the note it plays. Trigger on: "strudel video", "live coding video", "show my code playing", "make a video of this track with the code", "prod by claude". Covers composing the track, recording it offline from pinned Strudel, and building the 1080x1080 video (typed opener, parts powering on, real Strudel theme switches, graffiti ASCII drops, typed sign-off).
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Unified source for audio and visual: Strudel tracks are first rendered offline into audio, and each note event is mapped back to the code token that generated it. The video is driven by these events—ensuring that every highlight lands precisely on its own note rather than relying on post-production alignment.
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.
What is happening here: Treating "code as visuals" as a data problem—audio and visual share the same source, meaning any discrepancies can only originate from the recording itself, never from misalignment.
Recording pipeline: record.mjs spins up a static server on 127.0.0.1 serving strictly recorder.html and node_modules. It uses a muted headless Chrome instance to evaluate each part individually, exporting the timestamp, parent part, value, and source code character range of every note, followed by offline rendering of the full mix (with an optional ending) and solo stems for ._scope() parts.
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,
What is happening here: Headless recording is far more stable than screen recording—it does not rely on real-time playback, avoids jitter, and conveniently exports the event table alongside code coordinates (locs used for highlighting).
Key to offline consistency: recorder.html only loads a pinned version of @strudel/web from local node_modules and fetches nothing from strudel.cc; the sample track is purely synthesized without samples, so the initial run requires no additional network requests for samples.
skills/prod-by-claude/scripts/recorder.html
nothing is fetched from strudel.cc. Samples are only fetched if the track itself calls samples(...).
What is happening here: Pinning down the recording environment prevents upstream web editor updates from causing render drift.
Timelines are generated, not handwritten: build-data.mjs converts Strudel cycles into video seconds, generates window.SQ (token highlights, section power-ons, widgets, energy curves), writes the total duration back to data-duration in index.html, and sets the audio start point as 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
What is happening here: Modifying the track does not require manual timeline adjustments—any edits to bars, builds, drops, or themes simply require recalculating the data.
Camera plans are automated by default: Without explicit camera instructions, framing follows section power-ons, zooms in on the all( block during builds, reveals new sections post-drop, and zooms out to the sign-off at the end; explicit camera lines in video.json are only needed for custom overrides.
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.
What is happening here: The template's bundled video.json already matches the example track (SKILL.md: 'The template already matches the example track, so skip this step when using it.'), allowing zero-config execution on the first run.
Recording quality acts as a gatekeeper rather than an afterthought: The recording logs audio levels every 4 bars and triggers warnings, requiring repeated recordings until drop peaks are ≤ -2 dBFS without clipping; track modifications require rewinding to steps 5–7 to re-record, while video.json edits only require repeating steps 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.
What is happening here: Making the cost of re-recording explicit (32 bars take about 5–7 minutes), forcing the agent to measure before fixing rather than inspecting only after full rendering.
2Core Capabilities
01Offline recording of Strudel tracks: full-track mix + solo stems for each ._scope() part + note event tables with code coordinates
02"Code as visuals" video syntax: tokens illuminated by notes (outline/ononset flash/sparse ring/trails), sections blooming on initial notes, authentic theme switching, build-up code erosion, drop graffiti ASCII storms, circular decode transition back to editor, typed sign-off
03Automated camera planning (overridable via camera lines in video.json), driven by musical bars rather than manual keyframes
041080×1080 @30fps MP4 export, with duration derived from bars and BPM (pre + bars×240/bpm + 4.6 seconds)
05One-click scaffolding: copies templates, tracks, and tool scripts via pure file operations without external dependencies or network calls
06Actionable verification checklist: build-data directly outputs designated snapshot timestamps and enforces --describe false (no frame uploads)
3External Dependencies
| 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 取音频（示例轨道无采样） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Execute local script or command: node scripts/new-project.mjs <dir> (pure local file copying: template + track + 4 tools files)
- 网络端点: Declared external network access: npm install (npm registry; dependency versions pinned by tools/package.json)
- 本地工作目录: File I/O and artifact output: Strictly confined to <project-dir>: data/events.json, data/events.js, assets/bgm.wav, assets/st
Audit Notes: Evaluation target = the skill directory itself (SKILL.md + scripts/ 4 files + assets/template + example track + references×3). The skill's own scripts make zero outbound requests: record.mjs only binds to a static server on 127.0.0.1 and drives local headless Chrome, recorder.html loads @strudel/web solely from node_modules, and build-data.mjs / new-project.mjs perform strictly local I/O; no credentials are read within the directory (SKILL.md explicitly states 'No credentials.', process.env only accesses CHROME path), and no third-party data exfiltration exists. Network access is restricted to two categories: 1) Fixed-version installations from official sources—npm install (npm registry, pinned in package.json) and Chrome for Testing 149.0.7827.22 (official @puppeteer/browsers installer, ~150MB, retrieved from Google storage); 2) Artifact-time external references—loading GSAP 3.14.2 from cdn.jsdelivr.net during composition loading, which according to Batch 4 guidelines (artifact-time external links are not subject to rating elevation) and repository precedents (hyperframes-animation / hyperframes-core both rated Blue) does not escalate risk level. Cloud rendering credit consumption is an optional, explicitly user-consented path (documented in risks, non-escalating). No TLS downgrades, detection bypasses, mass data scraping, or arbitrary local code execution surfaces found.
5Second-Pass Verification
- [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 小节』与云渲染『消耗多少额度』只有文档声明，源码内无可复现依据；本次为只读侦查，未运行录音或渲染，故不作为已核事实使用。
6Verdict & Scenarios
Best for: Ideal for users who have a Strudel live-coding track (or are willing to let an agent compose one following references/composing.md) and want a 1080×1080 video where the code visually performs itself; also suited for portfolios or social media content requiring reproducible builds (templates, data, and recording scripts are all self-contained in the project). Works seamlessly on macOS/Linux following the documentation, with zero modifications needed on the first run using the bundled example track.
Not for: Not suitable for: 1) Non-Strudel audio or DAW projects—explicitly out of scope (use HyperFrames music workflows instead); 2) Visualization needs without code to display (visualizing existing standalone audio files is unsupported); 3) Purely offline environments unwilling to install Node 22/npm or download Chrome (both recording and rendering pipelines require local Chrome and npm packages); 4) Users unwilling to consume cloud render credits or perform networked rendering (they should stick to local rendering and accept that GSAP requires network access).
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload prod-by-claude.tar.gz
sha256:
Option B · Copy Guide for Agent90eabb744789abe6…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit ba7a0bb6d3.