本文へ移動
cccskills
無料GitHub で公開

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).

インストール方法を見る

含まれるファイル(13)

  • SKILL.md5.2 KB
  • assets/example/track.strudel.js1.7 KB
  • assets/template/app.js38.3 KB
  • assets/template/index.html6.0 KB
  • assets/template/video.json656 B
  • references/composing.md4.4 KB
  • references/themes.md2.2 KB
  • references/video.md5.7 KB
  • scripts/build-data.mjs12.3 KB
  • scripts/new-project.mjs1.8 KB
  • scripts/package.json319 B
  • scripts/record.mjs10.4 KB
  • scripts/recorder.html1.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.

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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

A 60 to 75 s hand-drawn ink film of the agent's day with its own user ("a day in my life as <name>'s agent"): one average session from the user's local Claude Code history, beginning to end. The story follows what they actually do (coding, tests, docs, shipping, videos, whatever the history shows), told with their real words (first message, check-ins, corrections, praise, memory titles). It is drawn in two-tone p5.brush strokes that boil at 8 fps and scored for strings composed note-for-note on the film's clock (the typed "claude" is the theme). Trigger on: "day in my life as my agent", "a film about me and my agent", "what is it like to be my agent", "animate your day with me", "make a video of our sessions". Covers harvesting the routine and receipts, the privacy gate, the chapter toolbox, the ink kit, the score, render and QC.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

duo

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

Turn a text prompt, a photo, or a live video clip into hand-made-looking p5.js animation — pencil handwriting that writes itself, photos repainted as brushstroke art with paint-on animation and camera moves, and short videos (iPhone Live Photos included) repainted frame-by-frame as a living painting. Trigger on: "handwritten text animation", "paint this photo", "painted video", "sketch effect", "turn my live photo into a painting", "write-on effect". Everything is 100% code: p5.brush strokes rendered headlessly, no image models.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

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 <name>". 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".

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

heygen-com のスキルをすべて見る

このスキルの問題を報告する