Noti Tiktok Full Text
notivn/AIEV
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.
Agent skill
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.
$ npx skills add heygen-com/hyperframes-community-skills --skill prod-by-claude -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install heygen-com/hyperframes-community-skills prod-by-claude --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "prod-by-claude" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/prod-by-claude into .claude/skills/prod-by-claude/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-by-claude", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/prod-by-claudeType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add heygen-com/hyperframes-community-skills --skill prod-by-claude -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install heygen-com/hyperframes-community-skills prod-by-claude --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/prod-by-claude .agents/skills/prod-by-claude && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "prod-by-claude" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/prod-by-claude into .agents/skills/prod-by-claude/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-by-claude", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add heygen-com/hyperframes-community-skills --skill prod-by-claude -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install heygen-com/hyperframes-community-skills prod-by-claude --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/prod-by-claude .cursor/skills/prod-by-claude && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "prod-by-claude" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/prod-by-claude into .cursor/skills/prod-by-claude/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-by-claude", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/heygen-com/hyperframes-community-skills.git --path skills/prod-by-claude--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add heygen-com/hyperframes-community-skills --skill prod-by-claude -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install heygen-com/hyperframes-community-skills prod-by-claude --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/prod-by-claude .gemini/skills/prod-by-claude && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "prod-by-claude" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/prod-by-claude into .gemini/skills/prod-by-claude/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-by-claude", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install heygen-com/hyperframes-community-skills prod-by-claudeInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add heygen-com/hyperframes-community-skills --skill prod-by-claude -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/prod-by-claude .github/skills/prod-by-claude && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "prod-by-claude" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/prod-by-claude into .github/skills/prod-by-claude/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-by-claude", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add heygen-com/hyperframes-community-skills --skill prod-by-claude -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install heygen-com/hyperframes-community-skills prod-by-claude --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/prod-by-claude .opencode/skills/prod-by-claude && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "prod-by-claude" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/prod-by-claude into .opencode/skills/prod-by-claude/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prod-by-claude", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
prod-by-claudeTurns 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.
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.
8 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit ba7a0bb. It shows what the files ask for, not the result of running them.
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.
Ships 5 files in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
npxnodenpmFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
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.
.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.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.
.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).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=<path>.node <skill>/scripts/new-project.mjs <project-dir> [track.strudel.js]<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.<project-dir>/tools, install the pinned tools: npm install<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<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.<project-dir>/tools, build the video data: node build-data.mjs .. It prints the
snapshot command for step 7.<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).<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.
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.<project-dir>. build-data.mjs rewrites the data-duration and
audio data-start attributes in index.html.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).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.pre,
graffiti in each drop, the decode after each drop, the sign-off at the end.pre seconds, and the video ends in black.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
SKILL.md and 12 other files (scripts, references, assets) in skills/prod-by-claude of heygen-com/hyperframes-community-skills.
Open the folder on GitHubat commit ba7a0bb
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Strudel Live-Coding Video Producer this skillheygen-com/hyperframes-community-skills | 187 | — | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| Noti Tiktok Full Textnotivn/AIEV | 127 | — | ~4.8k | Automated safety check: Pass | MIT | |
| Noti Tiktok Vnnotivn/AIEV | 127 | — | ~5.4k | Automated safety check: Pass | MIT | |
| Noti Youtube Editnotivn/AIEV | 127 | — | ~5.7k | Automated safety check: Pass | MIT | |
| Embedded Video Captionsheygen-com/hyperframes | 60k | 3 repos | ~8.6k | Automated safety check: Pass | Apache-2.0 | |
| Music to Videoheygen-com/hyperframes | 60k | 3 repos | ~4.7k | Automated safety check: Notes | Apache-2.0 |
notivn/AIEV
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.
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…
notivn/AIEV
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.
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.
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.
heygen-com/hyperframes
Mixes audio already placed in a HyperFrames composition: fades, gain, ducking under a voiceover, effect chains, automation and shared submix buses.
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.
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.
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.
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.
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.
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.
Categories
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.