A fixed HTML video composition that places two HTML screens inside a photographed open foldable phone. It is intended for side-by-side visual comparisons, with the phone and hands supplied as a fixed image.

Use it to show two apps, feeds, chats, product versions, or other HTML scenes next to each other in a phone frame.

It avoids rebuilding the phone, its screen shapes, or its hands when making comparison videos.

duo — Skill for Claude Code and Codex by heygen-com

Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo

git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills

agentmods

npx agentmods add skills/heygen-com/hyperframes-community-skills/duo

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/heygen-com/hyperframes-community-skills/duo/github.svg)](https://agentmods.dev/skills/heygen-com/hyperframes-community-skills/duo)

Your own site

<a href="https://agentmods.dev/skills/heygen-com/hyperframes-community-skills/duo"><img src="https://agentmods.dev/badge/skills/heygen-com/hyperframes-community-skills/duo/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/heygen-com/hyperframes-community-skills/duo"><img src="https://agentmods.dev/badge/skills/heygen-com/hyperframes-community-skills/duo.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 160 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,044 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00160	$0.02044
Opus 5	$0.00080	$0.01022
Sonnet 5	$0.00032	$0.00409
Haiku 4.5	$0.00016	$0.00204

Measured yesterday against content hash ebf19d43a676, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

duo scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/build.mjs), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/duo/SKILL.md · 164 lines

How it starts

The opening of the file, as written. The whole thing — 164 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Duo

One fixed 1448×1086 @ 30fps composition: a photo of two hands holding an open foldable, with both screens blanked. You fill the two screen slots with HTML (live video, a mock chat, a scrolling feed, anything HyperFrames renders) and the rig masks it to the phone's true rounded-corner geometry.

plate

The phone and hands are a photograph, not something you build. assets/plate.png IS the device. Never recreate, redraw, or CSS-model the foldable, its bezel, the hinge, or the hands, and never substitute a different image. build.mjs copies the plate into every project; if it is missing, stop and reinstall the skill rather than improvising a phone.

Do not edit the rig. The two .screen rects, their corner radii and the hinge divider were measured from that photo pixel by pixel. Every visual change you make happens inside #screen-left .content and #screen-right .content, plus the one shared GSAP timeline.

When to use / when not to

Use for any "two things side by side on a phone" beat: app vs app, feed vs feed, two chats answering the same prompt, two versions of a product.
Do not use when the user wants a single phone, a laptop, or a real device bezel they supply — this skill is one specific photo. For a different device plate you would re-measure geometry the same way (see references/screen-geometry.md) rather than stretch this one.

Requirements

Node 18+ and the HyperFrames CLI via npx hyperframes@latest (@latest is mutable; pin a version for byte-identical re-renders).
Load your motion doctrine first if your workspace has one. The rig's only built-in motion is one slow camera push; everything inside the screens must perform (scrolls, swipes, typing, taps), never idle-wobble.

Network and side effects (complete list)

registry.npmjs.org — the HyperFrames CLI itself, via npx.
cdn.jsdelivr.net — the composition loads GSAP (pinned 3.14.2) at preview/render time. Rendering is not fully offline.
Anything YOU add to the screens (video clips, avatars, fonts) is your side effect: fetching a site, downloading media, or scraping UI happens only if the user's request calls for real content, and only from sources they are entitled to use. references/sourcing-real-ui.md documents how, and the rights caveat.

Read the full file on GitHub · 164 lines

Files

What ships with it

10 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

yesterday First seen · 164 lines · 160 tokens per session scan A ebf19d43a676

Subscribe to this mod's changes

duo is a skill published in the GitHub repository heygen-com/hyperframes-community-skills (70 stars, last pushed yesterday), licensed Apache-2.0. It adds 160 tokens to every session and 2,044 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-11.

Creative and media Frontend agent-skills ai-agents hyperframes video-automation

video-hyperframes

Hyperframes / Remotion-compatible continuous frame animation with autoplay support.

nexu-io/open-design · 18 tokens

hyperframes-oversized-cursor

House-style oversized macOS cursor technique for HyperFrames videos. Use when a scene involves cursors, pointer-led action, kicking off a UI scene, igniting a morph/transition/typing with a click, or when a scene reads as static/dead/stale and needs motion to carry the eye. Covers cursor size/look, off-screen entry…

oyi77/1ai-skills · 95 tokens

p5js

Use when users request: p5.js sketches, creative coding, generative art, interactive visualizations, canvas animations, browser-based visual art, data viz, shader effects, or any p5.js project.

NousResearch/hermes-agent · 20 tokens

webgl-particle-galaxy

A real-time particle galaxy — tens of thousands of additive-blended GPU points spiraling around a bright core, their orbits solved entirely in the vertex shader (from glVertexID), so the whole cloud draws in one call. Rendered as a single self-contained index.html. Use when the brief asks for a "particle field"…

nexu-io/open-design · 126 tokens

webgl-horizontal-parallax

A horizontal-scroll WebGL gallery (Three.js): frames glide sideways with lerp smoothing and each image parallaxes its texture (UV shift) by its position in the viewport.

nexu-io/open-design · 41 tokens

webgl-aurora-veil

A self-contained WebGL2 hero: layered aurora light curtains warped over a night sky scattered with stars; move the cursor to sway the veil.

nexu-io/open-design · 38 tokens