Agent skill

Duo Foldable Phone Comparison

by heygen-com in 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.

Apache-2.0Auto-check passedMedia & Creative

Install Duo Foldable Phone Comparison

skills CLI
$ npx skills add heygen-com/hyperframes-community-skills --skill duo -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install heygen-com/hyperframes-community-skills duo --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/duo .claude/skills/duo && rm -rf skills-src

Use ~/.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/

Facts

Skill name
duo
GitHub stars
178
Used in
1 other repo
Token cost
~2k tokens
SKILL.md length
1,039 words
Files
11 (incl. scripts, references, assets)
Skills in repo
8
Repo updated
First seen
Licence
Apache-2.0

At a glance

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.

  • Works in 5 steps: Scaffold a project → Decide what each screen does for the… → Author the screens. Inside each .content… → …
  • Making a two-screen comparison video such as TikTok versus Reels
  • SKILL.md covers When to use / when not to, Requirements, Network and side effects… and Flow, plus 4 more sections
  • Runs JavaScript scripts from its folder; calls npx and node

What it does

Duo renders comparison and meme videos on a single fixed still: a photograph of two hands holding an open foldable phone with both screens blank. The agent writes the HTML that plays inside the left and right screen slots, such as a mock chat, a scrolling feed or live video, and the rig masks it to the phone's rounded-corner geometry. The composition is 1448×1086 at 30fps.

The phone image, screen rectangles, corner radii and hinge divider are treated as fixed: the skill says not to redraw the device or edit the rig. Changes happen only inside the two screen content areas and one shared GSAP timeline, and the only built-in motion is one slow camera push. A build.mjs script copies the plate into each project and writes only inside the output folder. The skill does not fit a single phone, a laptop or a bezel you supply.

It needs Node 18 or newer and the HyperFrames CLI run through npx. The composition loads GSAP from the jsDelivr CDN at preview and render time, so rendering is not fully offline. Reference notes cover feed recipes, screen geometry and sourcing real UI, including a rights caveat for content you add.

When your agent uses it

  • Making a two-screen comparison video such as TikTok versus Reels
  • Showing two chats answering the same prompt side by side
  • Producing a before and after clip on a foldable phone photo
  • Racing two apps or feeds in one frame for a meme video

Example prompts

  • “Make a foldable phone meme with ChatGPT on the left screen and Claude on the right.”
  • “Put a TikTok-style feed on the left and an Instagram Reels feed on the right, then render the video.”
  • “Create a me versus my friend chat comparison video using the two-screen phone.”

Requirements

  • Node 18 or newer
  • The HyperFrames CLI via npx hyperframes@latest
  • Network access to npm and the jsDelivr CDN

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Scaffold a project
  2. Decide what each screen does for the length of the clip, in writing,
  3. Author the screens. Inside each .content you have a normal DOM
  4. Check and snapshot
  5. Render only when the user asks (ask first if your harness gates renders)

What it can do on your machine

Read from SKILL.md and the folder at commit ba7a0bb. 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

    Ships 1 file in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • npx
    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, 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

Duo Foldable Phone Comparison loads about 2k tokens when it runs, and up to ~4.6k if it reads all its reference files. Until then it costs about 161 tokens; SKILL.md has 1,039 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~161
When it runs · the whole SKILL.md, loaded when a task matches
~2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.6k

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); the scripts in this folder are not scanned.

SKILL.md

The full file from heygen-com/hyperframes-community-skills at commit ba7a0bb, republished under its Apache-2.0 licence (© heygen-com). 1,039 words, ~2,007 tokens.

Download SKILL.mdSave it as .claude/skills/duo/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
duo
description
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.

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.

Image: 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.

No credentials, no paid operations, no telemetry. build.mjs writes only inside --out and refuses to write through symlinks.

Flow

<SKILL_DIR> is this skill's installed directory (e.g. ~/.claude/skills/duo).

  1. Scaffold a project:
bash
node <SKILL_DIR>/scripts/build.mjs --out ./foldable-meme --duration 10 --icons tiktok,instagram

--icons is optional; it copies the real TikTok / Instagram glyph sheets (assets/icons-*.svg, extracted from the live mobile sites) into the project.

  1. Decide what each screen does for the length of the clip, in writing, before touching HTML. The pause test: at any second, something inside at least one screen must be mid-motion (a swipe landing, a video playing, text arriving). Two static screenshots is not a video.

  2. Author the screens. Inside each .content you have a normal DOM viewport: left 495×849, right 498×849. Position against those, never the root. Patterns (full-screen snap feed, drag→fling swipe, like-tap, chat typing) are in references/feed-recipes.md. Rules:

    • <video class="clip" data-start data-duration muted playsinline> for every clip; HyperFrames owns playback. Overlap the windows of an outgoing and incoming clip across a swipe so both are decoded mid-transition.
    • One timeline. Add your tweens to tl inside the marked hook; do not create a second gsap.timeline or register another window.__timelines key.
    • No repeat: -1, no Math.random, no clocks — the render seeks.
    • Status bar: the photo's original screens showed 9:41 top-left of the left screen and wifi/battery top-right of the right screen. Reproduce that split if your apps show a status bar; it sells the "one device" read.
  3. Check and snapshot:

bash
npx hyperframes@latest check ./foldable-meme
npx hyperframes@latest snapshot ./foldable-meme --at 1,4,7 --no-end

Lint must be 0 errors. Layout/contrast warnings about text passing under a fixed header, or white UI text over video, are expected for app UIs; read the frames instead and confirm (a) content reaches every rounded corner with no gap, (b) the gray hinge divider is visible between the screens, (c) nothing from one screen leaks over the hinge.

  1. Render only when the user asks (ask first if your harness gates renders):
bash
npx hyperframes@latest render ./foldable-meme -o ./foldable-meme/renders/v1.mp4
Show full SKILL.md (376 more words)Show less

Verify success

check passes lint with 0 errors; snapshot frames show both screens filled edge to edge inside the phone with the divider intact; the MP4 is the requested duration at 1448×1086 and, on a pause at any second, something on screen is moving. Pull frames from the rendered MP4 (not the preview) for the final QC.

Rules

  • Never resize, move, or re-radius the screens to "fit" content. Fit content to the slots. If a mock app looks too big, scale the app's internal type, not the screen.
  • Real content must be real: if the user asks for TikTok or Instagram, pull the actual UI glyphs and layout metrics from the live site and use real posts (with their real usernames and counts), not invented ones. Invented handles are only for fictional / parody screens the user explicitly wants.
  • Keep the camera push as the only rig motion. Do not add drift, breathe, or glow loops anywhere; fill time with story inside the screens instead.
  • Output stays 1448×1086 (the plate's native 4:3). Offer a 16:9 or 1:1 crop as a follow-up render rather than resizing the rig.

Files

  • assets/plate.png — the clean plate, screens blanked to neutral (1448×1086).
  • assets/screen-spec.json — measured rects, radii, hinge, status-bar split.
  • assets/icons-tiktok.svg, assets/icons-instagram.svg — <symbol> sheets of the real mobile-web glyphs (like, comment, share, nav bars…).
  • template/index.template.html — the locked rig with two empty slots.
  • scripts/build.mjs — scaffolder.
  • references/screen-geometry.md — how the geometry was measured and how to re-measure for a new plate.
  • references/feed-recipes.md — snap feed, swipe physics, like tap, chat typing.
  • references/sourcing-real-ui.md — pulling real app UI and clips, and the rights caveat.

Provenance and licensing

  • The plate is derived from a photo posted publicly on X by @A_Kapustin (status 2097769962936868872, a foldable showing ChatGPT and Claude side by side); the two screens were blanked so it can carry any content. It is redistributed here as a meme template; users of this skill publish results at their own judgment and should credit the source where appropriate.
  • The icon sheets reproduce TikTok's and Instagram's own UI glyphs (extracted from their public mobile web DOM) so mock screens look like the real apps. They are trademarks of their owners and are included for parody / commentary use only.
  • GSAP is loaded from jsDelivr under its standard license; it is not vendored.

© 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

Files

SKILL.md and 10 other files (scripts, references, assets) in skills/duo of heygen-com/hyperframes-community-skills.

  • SKILL.md
  • assets/icons-instagram.svg
  • assets/icons-tiktok.svg
  • assets/plate-preview.jpg
  • assets/plate.png
  • assets/screen-spec.json
  • references/feed-recipes.md
  • references/screen-geometry.md
  • references/sourcing-real-ui.md
  • scripts/build.mjs
  • template/index.template.html

Open the folder on GitHubat commit ba7a0bb

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in heygen-com/hyperframes-community-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Duo Foldable Phone Comparison 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.

Duo Foldable Phone Comparison compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Duo Foldable Phone Comparison this skillheygen-com/hyperframes-community-skills1781 repos~2kAutomated safety check: PassApache-2.0
HyperFrames Animationheygen-com/hyperframes59k3 repos~2.1kAutomated safety check: PassApache-2.0
Embedded Video Captionsheygen-com/hyperframes59k3 repos~8.6kAutomated safety check: PassApache-2.0
Figma to HyperFramesheygen-com/hyperframes59k3 repos~4.5kAutomated safety check: NotesApache-2.0
Remotion to HyperFrames Porterheygen-com/hyperframes59k3 repos~2.8kAutomated safety check: PassApache-2.0
Talking-Head Video Pipelinenaive-kun/naive-video-skill132—~3.3kAutomated safety check: PassMIT

Similar skills

  • HyperFrames Animation

    heygen-com/hyperframes

    Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.

    59k GitHub starsUsed in 3 repos~2.1k tokens
    Media & CreativeAuto-check passed
  • Embedded Video Captions

    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.

    59k GitHub starsUsed in 3 repos~8.6k tokens
    Media & CreativeAuto-check passed
  • Figma to HyperFrames

    heygen-com/hyperframes

    Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.

    59k GitHub starsUsed in 3 repos~4.5k tokens
    Media & CreativeAuto-check: notes
  • Remotion to HyperFrames Porter

    heygen-com/hyperframes

    Ports an existing Remotion (React) composition to HyperFrames HTML with GSAP, one way, and grades the result against a tiered set of reference fixtures.

    59k GitHub starsUsed in 3 repos~2.8k tokens
    Media & CreativeAuto-check passed
  • Talking-Head Video Pipeline

    naive-kun/naive-video-skill

    Turns raw or rough-cut talking-head footage into a captioned, animated final video through a staged, resumable production pipeline.

    132 GitHub stars~3.3k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed
  • Talking Head Recut

    heygen-com/hyperframes

    Lays timed graphic cards such as lower-thirds, data callouts and quotes over an existing talking-head video, synced to the transcript.

    59k GitHub starsUsed in 4 repos~16k tokens
    Media & CreativeAuto-check passed

More from heygen-com/hyperframes-community-skills

All 8 skills in this repo
  • X Posting License Video

    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.

    178 GitHub starsUsed in 1 repo~1.2k tokens
    Auto-check passed
  • Day in My Life Agent Film

    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.

    178 GitHub stars~1.7k tokensUpdated 9 days ago
    Auto-check passed
  • 3D Camera Captions for HyperFrames

    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.

    178 GitHub starsUsed in 1 repo~2.3k tokens
    Auto-check passed
  • p5 Paint Animation

    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.

    178 GitHub stars~1.8k tokensUpdated 9 days ago
    Auto-check passed
  • Strudel Live-Coding Video Producer

    heygen-com/hyperframes-community-skills

    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.

    178 GitHub stars~1.3k tokensUpdated 9 days ago
    Auto-check passed
  • Session Story Film

    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.

    178 GitHub stars~1.8k tokensUpdated 9 days ago
    Auto-check passed

Works with

Questions about Duo Foldable Phone Comparison

What does Duo Foldable Phone Comparison do?

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. Duo renders comparison and meme videos on a single fixed still: a photograph of two hands holding an open foldable phone with both screens blank. The agent writes the HTML that plays inside the left and right screen slots, such as a mock chat, a scrolling feed or live video, and the rig masks it to the phone's rounded-corner geometry.

When should I use Duo Foldable Phone Comparison?

Duo Foldable Phone Comparison fits situations like: making a two-screen comparison video such as TikTok versus Reels; showing two chats answering the same prompt side by side; producing a before and after clip on a foldable phone photo; racing two apps or feeds in one frame for a meme video.

How do I install Duo Foldable Phone Comparison in Claude Code?

Run `npx skills add heygen-com/hyperframes-community-skills --skill duo -a claude-code`. Or copy the skill folder (skills/duo in heygen-com/hyperframes-community-skills) into .claude/skills/duo in your project. Claude Code loads it when a task matches its description.

How do I install Duo Foldable Phone Comparison in Codex?

Run `npx skills add heygen-com/hyperframes-community-skills --skill duo -a codex`. Or copy the skill folder (skills/duo in heygen-com/hyperframes-community-skills) into .agents/skills/duo in your project. Codex loads it when a task matches its description.

Can I use Duo Foldable Phone Comparison 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 heygen-com/hyperframes-community-skills --skill duo -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/duo, .gemini/skills/duo, .github/skills/duo and .opencode/skills/duo in your project.

What does Duo Foldable Phone Comparison need to run?

Going by SKILL.md and its folder, Duo Foldable Phone Comparison needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npx and node). Our summary lists: Node 18 or newer; The HyperFrames CLI via npx hyperframes@latest; Network access to npm and the jsDelivr CDN.

Does Duo Foldable Phone Comparison access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Duo Foldable Phone Comparison 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Duo Foldable Phone Comparison use?

Duo Foldable Phone Comparison 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.

How many tokens does Duo Foldable Phone Comparison use?

About 2k tokens (SKILL.md is roughly 8k 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 2.6k tokens, read only when the agent opens those files.

What are the alternatives to Duo Foldable Phone Comparison?

Skills that share tags, products or a category with Duo Foldable Phone Comparison: HyperFrames Animation (heygen-com/hyperframes, 59k stars), Embedded Video Captions (heygen-com/hyperframes, 59k stars), Figma to HyperFrames (heygen-com/hyperframes, 59k stars) and Remotion to HyperFrames Porter (heygen-com/hyperframes, 59k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Duo Foldable Phone Comparison?

heygen-com (a GitHub organization) maintains it in heygen-com/hyperframes-community-skills, which has 178 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.