Agent skill

Strudel Live-Coding Video Producer

by heygen-com in heygen-com/hyperframes-community-skills

Turns a Strudel live-coding music track into a 1080x1080 HyperFrames video where the code itself is the picture and each line highlights on the note it plays.

Apache-2.0Auto-check passedMedia & Creative

Install Strudel Live-Coding Video Producer

skills CLI
$ npx skills add heygen-com/hyperframes-community-skills --skill prod-by-claude -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install heygen-com/hyperframes-community-skills prod-by-claude --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/prod-by-claude .claude/skills/prod-by-claude && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
prod-by-claude
GitHub stars
187
Token cost
~1.3k tokens
SKILL.md length
643 words
Files
13 (incl. scripts, references, assets)
Skills in repo
8
Repo updated
First seen
Licence
Apache-2.0

At a glance

Turns a Strudel live-coding music track into a 1080x1080 HyperFrames video where the code itself is the picture and each line highlights on the note it plays.

  • Works in 8 steps: Create the project (plain file copies) → Edit /video.json: bars, builds, drops,… → From /tools, install the pinned tools:… → …
  • Turning a Strudel live-coding track into a video of the code playing
  • SKILL.md covers When to use, Inputs, Tools and dependencies and Workflow, plus 4 more sections
  • Runs JavaScript scripts from its folder; calls npx, node and npm

What it does

The skill composes or accepts a Strudel track, defines its arrangement in bars including which bars build and which drop, then renders the music offline and drives the video from Strudel's own note events so every visual highlight lands exactly on its note. It explicitly does not cover other DAW projects, talking-head videos, or visualizers for audio that has no underlying Strudel code.

The toolchain is pinned: Node 22 or newer, the HyperFrames CLI run through npx at a fixed version, and a tools/package.json that fixes @strudel/web, puppeteer-core, @puppeteer/browsers and two OFL fonts, plus a Chrome for Testing build or any Chrome path you supply. No credentials are needed. The workflow scaffolds a project from a template or the example track, edits video.json for bars, builds, drops, themes and sign-off, installs the tools, then records the offline audio, repeating until drops peak at or below -2 dBFS with no clipped samples. The excerpt is cut off after the data-building step.

When your agent uses it

  • Turning a Strudel live-coding track into a video of the code playing
  • Composing a new Strudel track and producing its live-coding video together
  • Fixing audio clipping before rendering a Strudel code video

Example prompts

  • “Make a video of this Strudel track with the code lighting up on each note.”
  • “Compose a 32-bar Strudel track with one build and one drop, then produce the video.”
  • “Re-record this track since the drops are clipping above -2 dBFS.”

Requirements

  • Node 22 or newer with npm
  • The HyperFrames CLI
  • Chrome for Testing or another Chrome build

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. Create the project (plain file copies)
  2. Edit /video.json: bars, builds, drops, themes, storm parts, signoff
  3. From /tools, install the pinned tools: npm install
  4. From /tools, if CHROME is not set, fetch Chrome for Testing
  5. From /tools, record: node record.mjs .. It takes about 5-7 minutes for 32
  6. From /tools, build the video data: node build-data.mjs .. It prints the
  7. From , run npx --yes hyperframes@0.8.70 check .`, then the printed snapshot
  8. From , render locally when the user asks for the video

What it can do on your machine

Read from SKILL.md and the folder at commit ba7a0bb. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 5 files in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • npx
    • node
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx and npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Strudel Live-Coding Video Producer loads about 1.3k tokens when it runs, and up to ~4.5k if it reads all its reference files. Until then it costs about 131 tokens; SKILL.md has 643 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~131
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from heygen-com/hyperframes-community-skills at commit ba7a0bb, republished under its Apache-2.0 licence (© heygen-com). 643 words, ~1,329 tokens.

Download SKILL.mdSave it as .claude/skills/prod-by-claude/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.
name
prod-by-claude
description
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).

prod-by-claude

Turn a Strudel track into a live-coding video. 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.

When to use

  • The user wants a video of Strudel code playing: "make a video of this Strudel track", "show the code lighting up", "live-coding video", or a track the agent composed for them.
  • Not for other audio or DAW projects, talking-head videos, or visualizers of an existing audio file with no Strudel code (use the HyperFrames music workflow for those).

Inputs

Tools and dependencies

  • Node 22 or newer, npm, and the HyperFrames CLI pinned to hyperframes@0.8.70 (run through npx --yes).
  • tools/package.json pins everything else: @strudel/web 1.3.0 (AGPL-3.0, installed from npm, not bundled here), puppeteer-core 25.12.0, @puppeteer/browsers 3.2.3, and the OFL fonts @fontsource/jetbrains-mono 5.3.0 and @fontsource/rubik-mono-one 5.3.0.
  • Chrome for Testing 149.0.7827.22 for recording, or any Chrome given as CHROME=<path>.
  • No credentials.

Workflow

  1. Create the project (plain file copies): node <skill>/scripts/new-project.mjs <project-dir> [track.strudel.js]
  2. Edit <project-dir>/video.json: bars, builds, drops, themes, storm parts, signoff (references/video.md, references/themes.md). The template already matches the example track, so skip this step when using it.
  3. From <project-dir>/tools, install the pinned tools: npm install
  4. From <project-dir>/tools, if CHROME is not set, fetch Chrome for Testing: npx --yes @puppeteer/browsers@3.2.3 install chrome@149.0.7827.22 --path .chrome
  5. From <project-dir>/tools, record: node record.mjs .. It takes about 5-7 minutes for 32 bars (give it a 10 minute timeout), prints levels per 4 bars and warns on clipping. Fix the track and record again until the drops peak at or below -2 dBFS with no clipped samples.
  6. From <project-dir>/tools, build the video data: node build-data.mjs .. It prints the snapshot command for step 7.
  7. From <project-dir>, run npx --yes hyperframes@0.8.70 check ., then the printed snapshot command, and look at every frame (what to look for: references/video.md).
  8. From <project-dir>, render locally when the user asks for the video: npx --yes hyperframes@0.8.70 render . -o renders/video.mp4 HyperFrames cloud render (npx --yes hyperframes@0.8.70 cloud render .) spends credits on the user's account: use it only after the user explicitly agrees.

If the track changes, repeat steps 5-7. If video.json changes, repeat steps 6-7.

Show full SKILL.md (247 more words)Show less

Outputs

  • assets/bgm.wav (the mix), assets/stem-<part>.wav (the scope part), data/events.json (every note with its code locations), data/events.js (what the composition reads).
  • renders/video.mp4, 1080×1080, 30 fps, about pre + bars × 240 / bpm + 4.6 seconds with a sign-off.

Side effects

  • Files: writes only inside <project-dir>. build-data.mjs rewrites the data-duration and audio data-start attributes in index.html.
  • Network: npm install (npm registry), the Chrome for Testing download (about 150 MB from Google's storage), and GSAP from cdn.jsdelivr.net when the composition loads. snapshot uploads frames to a hosted captioning model unless given --describe false, so always pass it. Recording runs on 127.0.0.1 only and fetches nothing unless the track itself loads samples (then from the sample URLs the track names).
  • Audio: recording is headless and muted; nothing plays out loud.
  • Cost: none, unless the user approves a cloud render.

Verify

  • record.mjs exits 0, lists every part, and reports no clipping.
  • check passes with 0 errors. canvas_overflow info notes for code lines below the frame are expected.
  • In the snapshots: line 1 typing at 0.6 s, the first part blooming and highlighted after pre, graffiti in each drop, the decode after each drop, the sign-off at the end.
  • In the render: the first sound lands at pre seconds, and the video ends in black.

Rights

The music written in Strudel belongs to its author; Strudel's AGPL covers the software, not the tracks. Built-in synths need no clearance. Samples loaded by a track are other people's recordings: use only sounds the user owns or has cleared.

© heygen-com, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 12 other files (scripts, references, assets) in skills/prod-by-claude of heygen-com/hyperframes-community-skills.

  • SKILL.md
  • assets/example/track.strudel.js
  • assets/template/app.js
  • assets/template/index.html
  • assets/template/video.json
  • references/composing.md
  • references/themes.md
  • references/video.md
  • scripts/build-data.mjs
  • scripts/new-project.mjs
  • scripts/package.json
  • scripts/record.mjs
  • scripts/recorder.html

Open the folder on GitHubat commit ba7a0bb

Compare with similar skills

Strudel Live-Coding Video Producer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Strudel Live-Coding Video Producer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Strudel Live-Coding Video Producer this skillheygen-com/hyperframes-community-skills187—~1.3kAutomated safety check: PassApache-2.0
Noti Tiktok Full Textnotivn/AIEV127—~4.8kAutomated safety check: PassMIT
Noti Tiktok Vnnotivn/AIEV127—~5.4kAutomated safety check: PassMIT
Noti Youtube Editnotivn/AIEV127—~5.7kAutomated safety check: PassMIT
Embedded Video Captionsheygen-com/hyperframes60k3 repos~8.6kAutomated safety check: PassApache-2.0
Music to Videoheygen-com/hyperframes60k3 repos~4.7kAutomated safety check: NotesApache-2.0

Similar skills

  • Build a Vietnamese vertical TikTok explainer in the "MỔ XẺ PAPER AI" (AI paper dissection) format with HyperFrames (HTML/CSS/GSAP → MP4), Noti.vn style.

    127 GitHub stars~4.8k tokensUpdated today
    Media & CreativeAuto-check passed
  • Noti Tiktok Vn

    notivn/AIEV

    Edit a Vietnamese vertical TikTok video (9:16) with HyperFrames following the Noti.vn/GĐT standard - talking-head + kinetic typography + karaoke captions + zoom/punch-in camera + timestamp-synced…

    127 GitHub stars~5.4k tokensUpdated today
    Media & CreativeAuto-check passed
  • Build a Vietnamese landscape 16:9 YouTube video (1920×1080) with HyperFrames (HTML/CSS/GSAP → MP4), keeping the Noti.vn/GĐT branding inherited from noti-tiktok-vn.

    127 GitHub stars~5.7k tokensUpdated today
    Media & CreativeAuto-check passed
  • Embedded Video Captions

    heygen-com/hyperframes

    Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.

    60k GitHub starsUsed in 3 repos~8.6k tokens
    Media & CreativeAuto-check passed
  • Music to Video

    heygen-com/hyperframes

    Turns a music track into a beat-synced HyperFrames video such as a lyric video, slideshow or kinetic promo, with any supplied images or clips cut onto the beat grid.

    60k GitHub starsUsed in 3 repos~4.7k tokens
    Media & CreativeAuto-check: notes
  • HyperFrames Audio

    heygen-com/hyperframes

    Mixes audio already placed in a HyperFrames composition: fades, gain, ducking under a voiceover, effect chains, automation and shared submix buses.

    60k GitHub starsUsed in 1 repo~6.4k tokens
    Media & CreativeAuto-check passed

More from heygen-com/hyperframes-community-skills

All 8 skills in this repo
  • Day in My Life Agent Film

    heygen-com/hyperframes-community-skills

    Turns your local Claude Code session history into a 60 to 75 second hand-drawn ink film about a day with your agent, with a string score and your approval of every line.

    187 GitHub stars~1.7k tokensUpdated 11 days ago
    Auto-check passed
  • Duo Foldable Phone Comparison

    heygen-com/hyperframes-community-skills

    Builds side-by-side comparison and meme videos on a fixed photo of hands holding an open foldable phone, with your own HTML playing in each screen.

    187 GitHub stars~2k tokensUpdated 11 days ago
    Auto-check passed
  • p5 Paint Animation

    heygen-com/hyperframes-community-skills

    Turns a text prompt, photo or short video into hand-made looking p5.js animation: self-writing handwriting, brushstroke repaints and living paintings rendered offline.

    187 GitHub stars~1.8k tokensUpdated 11 days ago
    Auto-check passed
  • X Posting License Video

    heygen-com/hyperframes-community-skills

    Builds a short animated posting-license card video from an X profile's name, handle, counters and avatar, using a fixed template that the agent only fills in and renders.

    187 GitHub stars~1.2k tokensUpdated 11 days ago
    Auto-check passed
  • 3D Camera Captions for HyperFrames

    heygen-com/hyperframes-community-skills

    Builds captions that move in 3D space around a talking head: a virtual camera flies past words at different depths, hero words hide behind the speaker, and text steps at 15 fps with motion blur.

    187 GitHub stars~2.3k tokensUpdated 11 days ago
    Auto-check passed
  • Session Story Film

    heygen-com/hyperframes-community-skills

    Turns one typical session between you and your agent into a short animated film built from your real messages, with a composed score, after you approve every line.

    187 GitHub stars~1.8k tokensUpdated 11 days ago
    Auto-check passed

Questions about Strudel Live-Coding Video Producer

What does Strudel Live-Coding Video Producer do?

Turns a Strudel live-coding music track into a 1080x1080 HyperFrames video where the code itself is the picture and each line highlights on the note it plays. The skill composes or accepts a Strudel track, defines its arrangement in bars including which bars build and which drop, then renders the music offline and drives the video from Strudel's own note events so every visual highlight lands exactly on its note. It explicitly does not cover other DAW projects, talking-head videos, or visualizers for audio that has no underlying Strudel code.

When should I use Strudel Live-Coding Video Producer?

Strudel Live-Coding Video Producer fits situations like: turning a Strudel live-coding track into a video of the code playing; composing a new Strudel track and producing its live-coding video together; fixing audio clipping before rendering a Strudel code video.

How do I install Strudel Live-Coding Video Producer in Claude Code?

Run `npx skills add heygen-com/hyperframes-community-skills --skill prod-by-claude -a claude-code`. Or copy the skill folder (skills/prod-by-claude in heygen-com/hyperframes-community-skills) into .claude/skills/prod-by-claude in your project. Claude Code loads it when a task matches its description.

How do I install Strudel Live-Coding Video Producer in Codex?

Run `npx skills add heygen-com/hyperframes-community-skills --skill prod-by-claude -a codex`. Or copy the skill folder (skills/prod-by-claude in heygen-com/hyperframes-community-skills) into .agents/skills/prod-by-claude in your project. Codex loads it when a task matches its description.

Can I use Strudel Live-Coding Video Producer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add heygen-com/hyperframes-community-skills --skill prod-by-claude -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/prod-by-claude, .gemini/skills/prod-by-claude, .github/skills/prod-by-claude and .opencode/skills/prod-by-claude in your project.

What does Strudel Live-Coding Video Producer need to run?

Going by SKILL.md and its folder, Strudel Live-Coding Video Producer needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npx, node and npm). Our summary lists: Node 22 or newer with npm; The HyperFrames CLI; Chrome for Testing or another Chrome build.

Does Strudel Live-Coding Video Producer access the network?

SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Strudel Live-Coding Video Producer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Strudel Live-Coding Video Producer use?

Strudel Live-Coding Video Producer is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Strudel Live-Coding Video Producer use?

About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.2k tokens, read only when the agent opens those files.

What are the alternatives to Strudel Live-Coding Video Producer?

Skills that share tags, products or a category with Strudel Live-Coding Video Producer: Noti Tiktok Full Text (notivn/AIEV, 127 stars), Noti Tiktok Vn (notivn/AIEV, 127 stars), Noti Youtube Edit (notivn/AIEV, 127 stars) and Embedded Video Captions (heygen-com/hyperframes, 60k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Strudel Live-Coding Video Producer?

heygen-com (a GitHub organization) maintains it in heygen-com/hyperframes-community-skills, which has 187 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on September 29, 2026.

Source: heygen-com/hyperframes-community-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.