HyperFrames Video Entry Point
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
Generate 2-minute product demo videos for technical projects (GitHub repos, APIs, technical products).
Install Product Demo Video
$ npx skills add mikeOnBreeze/cc-crossbeam --skill product-demo-video -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install mikeOnBreeze/cc-crossbeam product-demo-video --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/mikeOnBreeze/cc-crossbeam.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/product-demo-video .claude/skills/product-demo-video && 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 "product-demo-video" agent skill from https://github.com/mikeOnBreeze/cc-crossbeam/tree/main/.claude/skills/product-demo-video into .claude/skills/product-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-demo-video", 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/mikeOnBreeze/cc-crossbeam/tree/main/.claude/skills/product-demo-videoType 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 mikeOnBreeze/cc-crossbeam --skill product-demo-video -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install mikeOnBreeze/cc-crossbeam product-demo-video --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mikeOnBreeze/cc-crossbeam.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/product-demo-video .agents/skills/product-demo-video && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "product-demo-video" agent skill from https://github.com/mikeOnBreeze/cc-crossbeam/tree/main/.claude/skills/product-demo-video into .agents/skills/product-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-demo-video", 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 mikeOnBreeze/cc-crossbeam --skill product-demo-video -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install mikeOnBreeze/cc-crossbeam product-demo-video --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mikeOnBreeze/cc-crossbeam.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/product-demo-video .cursor/skills/product-demo-video && 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 "product-demo-video" agent skill from https://github.com/mikeOnBreeze/cc-crossbeam/tree/main/.claude/skills/product-demo-video into .cursor/skills/product-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-demo-video", 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/mikeOnBreeze/cc-crossbeam.git --path .claude/skills/product-demo-video--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 mikeOnBreeze/cc-crossbeam --skill product-demo-video -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install mikeOnBreeze/cc-crossbeam product-demo-video --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mikeOnBreeze/cc-crossbeam.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/product-demo-video .gemini/skills/product-demo-video && 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 "product-demo-video" agent skill from https://github.com/mikeOnBreeze/cc-crossbeam/tree/main/.claude/skills/product-demo-video into .gemini/skills/product-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-demo-video", 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 mikeOnBreeze/cc-crossbeam product-demo-videoInstalls 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 mikeOnBreeze/cc-crossbeam --skill product-demo-video -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/mikeOnBreeze/cc-crossbeam.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/product-demo-video .github/skills/product-demo-video && 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 "product-demo-video" agent skill from https://github.com/mikeOnBreeze/cc-crossbeam/tree/main/.claude/skills/product-demo-video into .github/skills/product-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-demo-video", 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 mikeOnBreeze/cc-crossbeam --skill product-demo-video -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install mikeOnBreeze/cc-crossbeam product-demo-video --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mikeOnBreeze/cc-crossbeam.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/product-demo-video .opencode/skills/product-demo-video && 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 "product-demo-video" agent skill from https://github.com/mikeOnBreeze/cc-crossbeam/tree/main/.claude/skills/product-demo-video into .opencode/skills/product-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "product-demo-video", 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.
Facts
- Skill name
product-demo-video- GitHub stars
- 293
- Token cost
- ~1.4k tokens
- SKILL.md length
- 306 words
- Files
- 5 (incl. references)
- Skills in repo
- 20
- Repo updated
- First seen
- Licence
- MIT
At a glance
Generate 2-minute product demo videos for technical projects (GitHub repos, APIs, technical products).
- Works in 7 steps: Discovery → Script → Parallel Build → …
- Explaining architecture
- SKILL.md covers When to Use, Workflow (7 Phases), Phase 1: Discovery and Phase 2: Script, plus 7 more sections
- Calls gh
What it does
Product Demo Video is an agent skill from mikeOnBreeze/cc-crossbeam. Generate 2-minute product demo videos for technical projects (GitHub repos, APIs, technical products). Runs parallel build options with structured critic review. Use when demoing code, explaining architecture, or creating explainer videos.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `references/WORKFLOW-ANALYSIS.md`, `references/critic-business.md` and `references/critic-technical.md`).
It sits in Media & Creative, covering Video production. It works with GitHub. The repository describes itself as: CrossBeam Permits — AI-assisted building-permit plan review for cities and builders. The licence is MIT.
When your agent uses it
- Explaining architecture
- Creating explainer videos
Example prompts
- “/product-demo-video”
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit cc5591e. 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
Shell commands in SKILL.md call:
gh
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use gh, 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
Product Demo Video loads about 1.4k tokens when it runs, and up to ~5.7k if it reads all its reference files. Until then it costs about 65 tokens; SKILL.md has 306 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.
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); files beside SKILL.md are not scanned.
SKILL.md
The full file from mikeOnBreeze/cc-crossbeam at commit cc5591e, republished under its MIT licence (© mikeOnBreeze). 306 words, ~1,378 tokens.
Download SKILL.mdSave it as
.claude/skills/product-demo-video/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- product-demo-video
- description
- Generate 2-minute product demo videos for technical projects (GitHub repos, APIs, technical products). Runs parallel build options with structured critic review. Use when demoing code, explaining architecture, or creating explainer videos.
Product Demo Video
Generate 2-minute product demo videos for technical projects with parallel build options and structured critic review.
When to Use
- Demoing a GitHub repo, API, or technical product
- Need professional explainer video quickly
- Want multiple approach options (animated vs simple)
Workflow (7 Phases)
DISCOVERY → SCRIPT → PARALLEL BUILD → PARALLEL CRITICS → ITERATE → FINAL → DELIVER
│ │ │ │ │ │ │
5-10m 10-15m 30-60m 10-15m 0-3 loops gate ship itPhase 1: Discovery
Clone and analyze the repo:
gh repo clone <owner/repo> /tmp/<repo>Extract:
- What it does (1 sentence)
- Who it's for
- 3-5 key features
- Architecture/flow
- Visual assets (logos, diagrams)
Ask (or use defaults):
| Question | Default |
|---|---|
| Duration | 2 min |
| Audience | Mixed (tech + business) |
| Tone | Professional-conversational |
| Format | Animated explainer |
Phase 2: Script
Use references/script-template.md structure:
Scene 1: Hook (0:00-0:15) — Problem statement
Scene 2: Context (0:15-0:30) — Why this matters
Scene 3-5: Features (0:30-1:30) — 3 key capabilities, 20s each
Scene 6: Technical (1:30-1:50) — Architecture/credibility
Scene 7: CTA (1:50-2:00) — What to do nextGuidelines:
- 150 words/minute
- Max 20 words/sentence
- Active voice
- Concrete over vague
Phase 3: Parallel Build
Spawn 2 sub-agents to build options simultaneously:
// Option A: Remotion (animated)
sessions_spawn({
label: "demo-video-option-a",
task: `Build animated demo video using Remotion.
Script: [paste script]
Voice: Use ElevenLabs, voice ID CcEB0ARKH8qIyzh2I1OR
Output: /tmp/demo-video/option-a.mp4
Approach:
1. Generate voiceover per scene (ElevenLabs API)
2. Create Remotion project with scene components
3. Sync animations to audio timing
4. Render at 1080p 30fps`
})
// Option B: Slides + ffmpeg (simple)
sessions_spawn({
label: "demo-video-option-b",
task: `Build slide-based demo video.
Script: [paste script]
Voice: Use ElevenLabs, voice ID CcEB0ARKH8qIyzh2I1OR
Output: /tmp/demo-video/option-b.mp4
Approach:
1. Generate voiceover (ElevenLabs API)
2. Create slides with Puppeteer (HTML → PNG)
3. Combine with ffmpeg, sync to audio
4. Add simple transitions`
})Wait for both. Present options to user or auto-select based on quality.
Phase 4: Parallel Critics
Spawn 2 critic personas (see references/ for full rubrics):
// Business Critic
sessions_spawn({
label: "critic-business",
task: `Review demo video as Business Critic "Mike".
Video: [path]
Script: [content]
See references/critic-business.md for full persona and rubric.
Score: Clarity, Professionalism, Business Value (1-10 each)
Output: Structured review with overall score and specific fixes.`
})
// Technical Critic
sessions_spawn({
label: "critic-technical",
task: `Review demo video as Technical Critic "Senior Engineer".
Video: [path]
Script: [content]
See references/critic-technical.md for full persona and rubric.
Score: Technical Accuracy, Credibility, Completeness (1-10 each)
Output: Structured review with overall score and specific fixes.`
})Phase 5: Iterate
Quality gates:
| Gate | Action |
|---|---|
| Both critics ≥7.5, no Critical issues | → Ship |
| Any critic <7.0 OR Critical issue | → Iterate |
| After 3 iterations, still failing | → Escalate to human |
Iteration loop:
- Collect all Critical/Important issues
- Fix in order of severity
- Re-render affected scenes only (if possible)
- Re-run critics
Phase 6: Final Review
Before shipping, verify:
- Both critics passed (7.5+)
- No Critical issues remain
- Audio synced correctly
- All scenes render cleanly
- CTA is clear
Phase 7: Deliver
Output:
✅ Demo video complete!
📹 Video: demo-video-final.mp4 (2:03)
🎯 Audience: [target]
📊 Scores: Business 8.2/10 | Technical 7.8/10
Covers:
1. [Key point 1]
2. [Key point 2]
3. [Key point 3]
Files saved to: [location]Deliver to:
- Slack channel (if specified)
- Save to workspace/outputs/
Tools & Dependencies
| Tool | Purpose | Required |
|---|---|---|
| ElevenLabs | Voiceover generation | Yes |
| Remotion | React video framework (Option A) | One of A/B |
| ffmpeg | Video processing (Option B) | One of A/B |
| Puppeteer | Slide screenshots (Option B) | One of A/B |
| sessions_spawn | Parallel sub-agents | Yes |
Voice default: CcEB0ARKH8qIyzh2I1OR (Jeremy - Technical Tutorial Narrator)
File References
references/critic-business.md— Business critic persona & rubricreferences/critic-technical.md— Technical critic persona & rubricreferences/script-template.md— Scene-by-scene script structuretemplates/remotion/— Remotion project scaffold with componentsscripts/generate-voiceover.py— ElevenLabs TTS helperscripts/render-slides.sh— ffmpeg slide-to-video combiner
© mikeOnBreeze, MIT. 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 4 other files (references) in .claude/skills/product-demo-video of mikeOnBreeze/cc-crossbeam.
- SKILL.md
- references/WORKFLOW-ANALYSIS.md
- references/critic-business.md
- references/critic-technical.md
- references/script-template.md
Open the folder on GitHubat commit cc5591e
Compare with similar skills
Product Demo Video 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 |
|---|---|---|---|---|---|---|
| Product Demo Video this skillmikeOnBreeze/cc-crossbeam | 293 | — | ~1.4k | Automated safety check: Pass | MIT | |
| HyperFrames Video Entry Pointheygen-com/hyperframes | 60k | 3 repos | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| Find Unplanned Issuesremotion-dev/remotion | 63k | — | ~673 | Automated safety check: Pass | Custom licence | |
| Webcode Local Windows Tts Installershuyu-labs/WebCode | 278 | — | ~787 | Automated safety check: Pass | Custom licence | |
| Pull Request Explainer Videoheygen-com/hyperframes | 60k | 2 repos | ~8.4k | Automated safety check: Notes | Apache-2.0 | |
| Vlog Auto Editznyupup/ai-video-editing-skill | 150 | — | ~6.8k | Automated safety check: Pass | MIT |
Similar skills
- Official
Find Unplanned Issues
remotion-dev/remotion
Audit and clean the Remotion GitHub masterplan hierarchy. An agent skill from remotion-dev/remotion.
Webcode Local Windows Tts Installer
shuyu-labs/WebCode
A skill your agent uses when building a local Windows WebCode installer from this repo for machine testing, especially when the package must bundle the Kokoro or sherpa-onnx Reply TTS service, model…
Pull Request Explainer Video
heygen-com/hyperframes
Turns a GitHub pull request into a code-change explainer video built from its diff, commits and files, rendered with HyperFrames.
Vlog Auto Edit
znyupup/ai-video-editing-skill
AI Agent自动剪辑旅行Vlog的完整工作流。从原始素材到成品视频，系统级只需ffmpeg，其余在Python venv内完成。by nyx研究所 (GitHub @znyupup · B站/小红书 @nyx研究所)
Video Assets
st0012/cctop
A skill your agent uses when publishing, replacing, auditing, or linking cctop promo/demo video assets through GitHub Releases, especially the non-latest media-assets release.
More from mikeOnBreeze/cc-crossbeam
All 20 skills in this repoAdu PDF Extraction
mikeOnBreeze/cc-crossbeam
This skill extracts construction PDF plan binders into agent-consumable formats.
Adu Targeted Page Viewer
mikeOnBreeze/cc-crossbeam
Extracts construction plan PDFs into page PNGs, reads the sheet index to build a sheet-to-page manifest, and enables targeted viewing of specific sheets.
Fal AI
mikeOnBreeze/cc-crossbeam
This skill enables AI video generation from images AND text-to-speech voiceover generation using Fal.ai's API.
Nano Banana
mikeOnBreeze/cc-crossbeam
This skill enables image generation and editing using Google's Gemini Nano Banana models.
Adu City Research
mikeOnBreeze/cc-crossbeam
Researches city-level ADU regulations, municipal codes, and standard details for any California city.
Adu Plan Review
mikeOnBreeze/cc-crossbeam
City-side ADU plan review — the flip side of adu-corrections-flow.
Related
Works with
Categories
Questions about Product Demo Video
What does Product Demo Video do?
Generate 2-minute product demo videos for technical projects (GitHub repos, APIs, technical products). Product Demo Video is an agent skill from mikeOnBreeze/cc-crossbeam. Generate 2-minute product demo videos for technical projects (GitHub repos, APIs, technical products).
When should I use Product Demo Video?
Product Demo Video fits situations like: explaining architecture; creating explainer videos.
How do I install Product Demo Video in Claude Code?
Run `npx skills add mikeOnBreeze/cc-crossbeam --skill product-demo-video -a claude-code`. Or copy the skill folder (.claude/skills/product-demo-video in mikeOnBreeze/cc-crossbeam) into .claude/skills/product-demo-video in your project. Claude Code loads it when a task matches its description.
How do I install Product Demo Video in Codex?
Run `npx skills add mikeOnBreeze/cc-crossbeam --skill product-demo-video -a codex`. Or copy the skill folder (.claude/skills/product-demo-video in mikeOnBreeze/cc-crossbeam) into .agents/skills/product-demo-video in your project. Codex loads it when a task matches its description.
Can I use Product Demo Video 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 mikeOnBreeze/cc-crossbeam --skill product-demo-video -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/product-demo-video, .gemini/skills/product-demo-video, .github/skills/product-demo-video and .opencode/skills/product-demo-video in your project.
What does Product Demo Video need to run?
Going by SKILL.md and its folder, Product Demo Video needs the command-line tools its instructions call (gh).
Does Product Demo Video access the network?
SKILL.md contains no URLs. Its commands use gh, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Product Demo Video 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. Review the folder before installing.
What licence does Product Demo Video use?
Product Demo Video is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Product Demo Video use?
About 1.4k tokens (SKILL.md is roughly 5.5k 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 4.4k tokens, read only when the agent opens those files.
What are the alternatives to Product Demo Video?
Skills that share tags, products or a category with Product Demo Video: HyperFrames Video Entry Point (heygen-com/hyperframes, 60k stars), Find Unplanned Issues (remotion-dev/remotion, 63k stars), Webcode Local Windows Tts Installer (shuyu-labs/WebCode, 278 stars) and Pull Request Explainer Video (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 Product Demo Video?
mikeOnBreeze (a GitHub user) maintains it in mikeOnBreeze/cc-crossbeam, which has 293 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on March 2, 2026.
Source: mikeOnBreeze/cc-crossbeam on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.