feat(skills): add pr-to-hyperframes visual walkthrough skill#875
Open
miguel-heygen wants to merge 3 commits into
Open
feat(skills): add pr-to-hyperframes visual walkthrough skill#875miguel-heygen wants to merge 3 commits into
miguel-heygen wants to merge 3 commits into
Conversation
New skill that generates short video walkthroughs of PR changes and embeds them in the PR description. Detects visual/UI changes in the diff and composes a before/after or feature walkthrough using HyperFrames. Includes ambient suggestion — when creating a PR with visual changes, the skill proactively offers to generate a walkthrough video so reviewers can see changes in motion instead of reading diffs.
Full pipeline for generating narrated video walkthroughs of PRs: - SKILL.md with 5-step workflow (analyze → narrate → TTS → manifest → render) - build.mjs: manifest-driven HTML composition with syntax-highlighted diffs, code slides, captions from whisper transcripts, and GSAP timeline - render.sh: full pipeline (assets → whisper → build → hyperframes → ffmpeg) - generate-audio.sh: per-segment Gemini TTS with validation and silence trimming - make-video.sh: fallback static-slide assembler Branding is auto-detected from the repo (package.json, design.md, git remote, logo files) — the only HyperFrames mention is a subtle attribution line in the outro and PR body. This makes the skill generic across any project. Includes ambient suggestion mode: when creating a PR with visual changes, the skill proactively offers to generate a walkthrough video.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| return fs.readFileSync(svgPath, "utf8"); | ||
| } | ||
| } | ||
| return `<img src="assets/${path.basename(brand.logo)}" class="project-logo" alt="${esc(brand.name)}" />`; |
| <div ${slideAttrs({ start, duration, i })}> | ||
| <div class="slide-bg"></div> | ||
| <div class="slide-stage stage--image"> | ||
| <img class="image-fill" src="assets/${esc(slide.src || "")}" alt=""/> |
…g, duration heuristic Based on testing the skill with subagents on HyperFrames PR #874 and Pacific PR #27684: - Emphasize that manifest schema must match build.mjs exactly (agents were inventing their own slide structures) - Add duration estimation formula: ~2.5 words/second - Specify which design.md tokens to extract for branding - Add GitHub org avatar as fallback logo source - Adjust narration length guidance for small vs large PRs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
pr-to-hyperframesskill — a full pipeline for generating narrated video walkthroughs of pull requests, modeled after tldraw's pr-walkthroughpackage.json,design.md, logo files, and git remote to brand the video with the project's own identity. The only HyperFrames mention is a subtle "Made with HyperFrames" attribution in the outro and PR bodyPipeline
generate-audio.sh)durations.jsonbuild.mjsgenerates a HyperFrames HTML composition with syntax-highlighted diffs, GSAP timeline, and whisper-timed captions;render.shorchestrates the full pipeline down to a 720p/30fps MP4File structure
Test plan
npx skills listdesign.mdpicks up custom colors/fontsdesign.mduses neutral palettebuild.mjsgenerates validindex.htmlfrom a sample manifestrender.shproduces a 720p MP4 end-to-end.tsx/.csschanges