本文へ移動
cccskills
無料GitHub で公開

duo

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.

インストール方法を見る

含まれるファイル(11)

  • SKILL.md7.9 KB
  • assets/icons-instagram.svg4.4 KB
  • assets/icons-tiktok.svg7.3 KB
  • assets/plate-preview.jpg24.0 KB
  • assets/plate.png388.8 KB
  • assets/screen-spec.json1.4 KB
  • references/feed-recipes.md4.2 KB
  • references/screen-geometry.md2.6 KB
  • references/sourcing-real-ui.md3.2 KB
  • scripts/build.mjs3.1 KB
  • template/index.template.html2.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.

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

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):
npx hyperframes@latest render ./foldable-meme -o ./foldable-meme/renders/v1.mp4

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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Captions living in 3D space around a talking head: a camera flies between the speaker and the words (whip-in, parallax truck, push), caption groups sit at different depths so camera moves pull them apart, hero words hide BEHIND the speaker through an alpha matte, a ring of words wraps round the speaker and turns in front of them, focus racks between depths, and text steps at 15 fps with ghost motion blur. Works in any type style (editorial serif, bold sans) or hand-drawn (p5.brush write-on). Trigger on: "3D text", "3D camera captions", "text around / behind the speaker", "camera moves through the text", "depth captions on my avatar video". Covers prep (portion, padded plate, matte, word clock, font metrics), the shot grammar, depth rules, QC, and limits.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

A 60 to 75 s hand-drawn ink film of the agent's day with its own user ("a day in my life as <name>'s agent"): one average session from the user's local Claude Code history, beginning to end. The story follows what they actually do (coding, tests, docs, shipping, videos, whatever the history shows), told with their real words (first message, check-ins, corrections, praise, memory titles). It is drawn in two-tone p5.brush strokes that boil at 8 fps and scored for strings composed note-for-note on the film's clock (the typed "claude" is the theme). Trigger on: "day in my life as my agent", "a film about me and my agent", "what is it like to be my agent", "animate your day with me", "make a video of our sessions". Covers harvesting the routine and receipts, the privacy gate, the chapter toolbox, the ink kit, the score, render and QC.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

Turn a text prompt, a photo, or a live video clip into hand-made-looking p5.js animation — pencil handwriting that writes itself, photos repainted as brushstroke art with paint-on animation and camera moves, and short videos (iPhone Live Photos included) repainted frame-by-frame as a living painting. Trigger on: "handwritten text animation", "paint this photo", "painted video", "sketch effect", "turn my live photo into a painting", "write-on effect". Everything is 100% code: p5.brush strokes rendered headlessly, no image models.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

Use when an agent needs to make a HyperFrames video of a Strudel live-coding track, where the code itself is the picture and every token lights up on the note it plays. Trigger on: "strudel video", "live coding video", "show my code playing", "make a video of this track with the code", "prod by claude". Covers composing the track, recording it offline from pinned Strudel, and building the 1080x1080 video (typed opener, parts powering on, real Strudel theme switches, graffiti ASCII drops, typed sign-off).

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

An agent makes an animated film of an average session with its own user, beginning to end, told with that user's real messages: whatever their routine is (code, writing, data, design, video). The agent sits at a desk in a room decorated from what it knows about the user, and the monitor shows their kind of work. Requests glide in as paper planes and unfold. Corrections are a 3D cartoon mallet that bonks, then turns to show the words on its face. Praise is a butterfly towing the words on a ribbon. The agent types each reply onto a sheet, folds it and throws it back. The film opens with the agent asleep until the monitor boots: "Initiating session with <name>". The agent composes its own orchestral score, cued to every action. p5.brush watercolour, rendered in HyperFrames. Trigger on: "a video of our session", "animate a session with me", "session story", "show what working with me is like", "make a film about me and my agent".

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

Create a 60–90 second, collage-style HyperFrames explainer from a hiding-in-plain-sight topic or supplied documents and links. Use for requests such as 'make a plain-sight explainer', 'Vox-style history of X', 'why is X everywhere?', or 'turn this document into an explainer'. Covers topic or source routing, research, script, static design approval, voiceover timing, motion continuity, build, and numeric quality gates.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes-community-skills1942026年9月29日 更新

heygen-com のスキルをすべて見る

このスキルの問題を報告する