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).
- Installs
- 167
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/heygen-com/hyperframes-community-skills --skill prod-by-claude- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads prod-by-claude automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
- A Strudel track (
.strudel.js), or a brief to compose one. Compose with references/composing.md. With no track, start from assets/example/track.strudel.js (synth-only, no samples). - The arrangement: length in bars, and which bars are builds and drops.
Tools and dependencies
- Node 22 or newer, npm, and the HyperFrames CLI pinned to
hyperframes@0.8.70(run throughnpx --yes). tools/package.jsonpins everything else:@strudel/web1.3.0 (AGPL-3.0, installed from npm, not bundled here),puppeteer-core25.12.0,@puppeteer/browsers3.2.3, and the OFL fonts@fontsource/jetbrains-mono5.3.0 and@fontsource/rubik-mono-one5.3.0.- Chrome for Testing 149.0.7827.22 for recording, or any Chrome given as
CHROME=<path>. - No credentials.
Workflow
- Create the project (plain file copies):
node <skill>/scripts/new-project.mjs <project-dir> [track.strudel.js] - Edit
<project-dir>/video.json:bars,builds,drops,themes,stormparts,signoff(references/video.md, references/themes.md). The template already matches the example track, so skip this step when using it. - From
<project-dir>/tools, install the pinned tools:npm install - From
<project-dir>/tools, ifCHROMEis not set, fetch Chrome for Testing:npx --yes @puppeteer/browsers@3.2.3 install chrome@149.0.7827.22 --path .chrome - 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. - From
<project-dir>/tools, build the video data:node build-data.mjs ..It prints the snapshot command for step 7. - From
<project-dir>, runnpx --yes hyperframes@0.8.70 check ., then the printed snapshot command, and look at every frame (what to look for: references/video.md). - From
<project-dir>, render locally when the user asks for the video:npx --yes hyperframes@0.8.70 render . -o renders/video.mp4HyperFrames 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.
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, aboutpre + bars × 240 / bpm + 4.6seconds with a sign-off.
Side effects
- Files: writes only inside
<project-dir>.build-data.mjsrewrites thedata-durationand audiodata-startattributes inindex.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.snapshotuploads 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.mjsexits 0, lists every part, and reports no clipping.checkpasses with 0 errors.canvas_overflowinfo 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
preseconds, 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.
FAQ
What does the prod-by-claude skill do?
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).
How do I install prod-by-claude?
Run npx skills add https://github.com/heygen-com/hyperframes-community-skills --skill prod-by-claude in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/prod-by-claude/ (personal) or .claude/skills/prod-by-claude/ (project).
Which AI agents can use prod-by-claude?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is prod-by-claude safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains prod-by-claude?
It is published by heygen-com in heygen-com/hyperframes-community-skills. It has 167 recorded installs.
More from heygen-com/hyperframes-community-skills
session-story
heygen-com/hyperframes-community-skills
An agent makes an animated film of an average session with its own user, beginning to end, told with that user's real messages: whatever their routine is (code, writing, data, design, video). The agent sits at a desk in a room decorated from what it knows about the user, and the monitor shows their kind of work. Requests glide in as paper planes and unfold. Corrections are a 3D cartoon mallet that bonks, then turns to show the words on its face. Praise is a butterfly towing the words on a ribbon. The agent types each reply onto a sheet, folds it and throws it back. The film opens with the agent asleep until the monitor boots: "Initiating session with ". The agent composes its own orchestral score, cued to every action. p5.brush watercolour, rendered in HyperFrames. Trigger on: "a video of our session", "animate a session with me", "session story", "show what working with me is like", "make a film about me and my agent".
vox-explainer
heygen-com/hyperframes-community-skills
Create a 60–90 second, collage-style HyperFrames explainer from a hiding-in-plain-sight topic or supplied documents and links. Use for requests such as 'make a plain-sight explainer', 'Vox-style history of X', 'why is X everywhere?', or 'turn this document into an explainer'. Covers topic or source routing, research, script, static design approval, voiceover timing, motion continuity, build, and numeric quality gates.
p5-paint-animation
heygen-com/hyperframes-community-skills
Open the skill to read its SKILL.md instructions.
camera-3d-captions
heygen-com/hyperframes-community-skills
Captions living in 3D space around a talking head: a camera flies between the speaker and the words (whip-in, parallax truck, push), caption groups sit at different depths so camera moves pull them apart, hero words hide BEHIND the speaker through an alpha matte, a ring of words wraps round the speaker and turns in front of them, focus racks between depths, and text steps at 15 fps with ghost motion blur. Works in any type style (editorial serif, bold sans) or hand-drawn (p5.brush write-on). Trigger on: "3D text", "3D camera captions", "text around / behind the speaker", "camera moves through the text", "depth captions on my avatar video". Covers prep (portion, padded plate, matte, word clock, font metrics), the shot grammar, depth rules, QC, and limits.
x-posting-license
heygen-com/hyperframes-community-skills
Turn any X (Twitter) profile into a 10.3s animated "POSTING LICENSE" card video — a fake driver's license in X's branding: the card slides in over an animated dot-matrix ground, license text types on letter-by-letter, follower / following / post counters tick up, a diagonal glimmer sweeps as the card tilts in 3D, it flips to a fine-print back with a signature write-on, then crouches and leaps out of frame. Trigger on: "X driver's license", "posting license", "make an X license for @handle", "license card video". The whole composition is a finished template — the agent only supplies profile data and renders.
duo
heygen-com/hyperframes-community-skills
Composite any two HTML screens into a locked photo plate of hands holding an open foldable phone — a 1448×1086 still with two blank 495×849 / 498×849 screen slots (left and right) — to make side-by-side meme and comparison videos: TikTok vs Reels, ChatGPT vs Claude, "me vs my friend", before/after, two apps racing. Trigger on: "foldable phone meme", "put X on the left screen and Y on the right", "two-screen comparison video", "the dual-screen phone meme", or any request that names two apps/feeds/chats to show at once. The plate, geometry, and camera are finished — the agent only authors what plays INSIDE the two screens and renders.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image