Stitch to Remotion Walkthrough Videos
google-labs-code/stitch-skills
Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.
Turns a chat transcript or screenshot into a configurable animated chat clip, rendered as a Remotion bundle with optional transparency.
Install Chat Motion Overlay Generator
$ npx skills add nexu-io/open-design --skill chat-motion-overlay -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install nexu-io/open-design chat-motion-overlay --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/nexu-io/open-design.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/chat-motion-overlay .claude/skills/chat-motion-overlay && 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 "chat-motion-overlay" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/chat-motion-overlay into .claude/skills/chat-motion-overlay/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chat-motion-overlay", 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/nexu-io/open-design/tree/main/skills/chat-motion-overlayType 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 nexu-io/open-design --skill chat-motion-overlay -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install nexu-io/open-design chat-motion-overlay --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/chat-motion-overlay .agents/skills/chat-motion-overlay && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "chat-motion-overlay" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/chat-motion-overlay into .agents/skills/chat-motion-overlay/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chat-motion-overlay", 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 nexu-io/open-design --skill chat-motion-overlay -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install nexu-io/open-design chat-motion-overlay --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/chat-motion-overlay .cursor/skills/chat-motion-overlay && 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 "chat-motion-overlay" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/chat-motion-overlay into .cursor/skills/chat-motion-overlay/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chat-motion-overlay", 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/nexu-io/open-design.git --path skills/chat-motion-overlay--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 nexu-io/open-design --skill chat-motion-overlay -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install nexu-io/open-design chat-motion-overlay --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/chat-motion-overlay .gemini/skills/chat-motion-overlay && 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 "chat-motion-overlay" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/chat-motion-overlay into .gemini/skills/chat-motion-overlay/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chat-motion-overlay", 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 nexu-io/open-design chat-motion-overlayInstalls 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 nexu-io/open-design --skill chat-motion-overlay -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/chat-motion-overlay .github/skills/chat-motion-overlay && 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 "chat-motion-overlay" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/chat-motion-overlay into .github/skills/chat-motion-overlay/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chat-motion-overlay", 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 nexu-io/open-design --skill chat-motion-overlay -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install nexu-io/open-design chat-motion-overlay --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/chat-motion-overlay .opencode/skills/chat-motion-overlay && 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 "chat-motion-overlay" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/chat-motion-overlay into .opencode/skills/chat-motion-overlay/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chat-motion-overlay", 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
chat-motion-overlay- GitHub stars
- 100k
- Token cost
- ~1.1k tokens
- SKILL.md length
- 449 words
- Files
- 33 (incl. scripts, references, assets)
- Skills in repo
- 245
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Turns a chat transcript or screenshot into a configurable animated chat clip, rendered as a Remotion bundle with optional transparency.
- Works in 5 steps: Normalize the chat input. → Choose a scene config. → Build the scene spec. → …
- Creating a short chat-bubble clip from a screenshot for a demo or social video
- SKILL.md covers Workflow, Supported Dimensions, Output Rules and Question Policy, plus 1 more section
- Runs TypeScript scripts from its folder
What it does
This skill normalizes a chat transcript or a screenshot of one into a structured message format, inferring participants and sides from visible avatars without recreating the actual avatar images unless the user provides or asks for them specifically. It then has you choose a scene setup — a container style such as none, WeChat, Telegram, or Messenger, an avatar mode, an optional device frame, and when nicknames should appear.
A bundled script turns the transcript and setup into one JSON scene file that a Remotion project can render directly, and a second script copies a template, inserts that file, and brings in any uploaded avatar images. The finished render can come out as a transparent MOV or WebM for layering, or as an editable project for further work downstream.
When your agent uses it
- Creating a short chat-bubble clip from a screenshot for a demo or social video
- Recreating a messenger-style conversation as an animated overlay
- Producing a transparent chat overlay to composite over other footage
Example prompts
- “Turn this WeChat screenshot into a motion overlay clip.”
- “Build a Telegram-style chat animation from this transcript as WebM.”
- “Make a transparent overlay of this conversation for me to edit later.”
Requirements
- A Node.js environment to run the bundled Remotion build scripts
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Normalize the chat input.
- Choose a scene config.
- Build the scene spec.
- Prepare a renderable bundle.
- Render the target output.
What it can do on your machine
Read from SKILL.md and the folder at commit 17e2559. 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/ (TypeScript, from the files we listed), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Chat Motion Overlay Generator loads about 1.1k tokens when it runs, and up to ~7k if it reads all its reference files. Until then it costs about 120 tokens; SKILL.md has 449 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); the scripts in this folder are not scanned.
SKILL.md
The full file from nexu-io/open-design at commit 17e2559, republished under its Apache-2.0 licence (© nexu-io). 449 words, ~1,128 tokens.
Download SKILL.mdSave it as
.claude/skills/chat-motion-overlay/SKILL.md (or your agent's skills folder). This skill also uses 32 other files; get the full folder from GitHub.- name
- chat-motion-overlay
- description
- Generate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, optional device frames, preset or uploaded avatars, nickname display rules, and transparent-video-ready Remotion bundles. Use when Codex needs to create reusable short-form chat clips for Douyin, demo videos, story reenactments, social-message proof scenes, or embeddable alpha overlays for Hyperframe and Remotion workflows.
- triggers
- chat motion overlay, animated chat, chat bubbles, message overlay, transparent chat video, 微信聊天动效, 聊天气泡动效, 透明聊天视频
- od.mode
- utility
- od.category
- animation-motion
Chat Motion Overlay
Turn chat content into a configurable motion overlay clip instead of a single hard-coded WeChat mock.
Workflow
Normalize the chat input.
- If the user gives a screenshot, extract the visible messages into the transcript format in
references/input-format.md. - If the user gives plain text, keep one message per beat and preserve exact wording when authenticity matters.
- For screenshots, use visible avatars as clues for participant count and message grouping, but do not crop or recreate avatar images by default. Infer participants and sides, then render with preset avatars unless the user provides avatar files or explicitly requests screenshot-derived avatars.
- If the user gives a screenshot, extract the visible messages into the transcript format in
Choose a scene config.
- Read
references/config-schema.md. - Decide container style, avatar mode, device frame, nickname mode, and delivery format before generating the bundle.
- When the user has not provided enough information, follow the question policy in
references/question-strategy.md.
- Read
Build the scene spec.
- Run
scripts/build_chat_overlay_spec.pywith a transcript and optional config JSON. - The script outputs a single JSON spec that Remotion can render directly.
- Run
Prepare a renderable bundle.
- Run
scripts/prepare_chat_overlay_bundle.py. - It copies the Remotion template, injects
src/chatSpec.ts, and copies any uploaded avatar files intopublic/.
- Run
Render the target output.
- Use the exact export commands in
references/output-modes.md. - Prefer
MOV（透明背景，可直接导入剪映 / PR / FCP 叠加）for editing,WebM（透明背景，适合网页 / 浏览器播放）for browsers, and editable engineering outputs when the user wants to keep composing downstream.
- Use the exact export commands in
Supported Dimensions
container:none,wechat,telegram,messengeravatarMode:preset,upload,mixeddeviceFrame:none,iphone-dynamic-islandnicknameMode:hidden,first-message-only,alwaysdeliveryFormat:mov:MOV（透明背景，可直接导入剪映 / PR / FCP 叠加）webm:WebM（透明背景，适合网页 / 浏览器播放）remotion:Remotion 工程（适合继续编辑和拼装）hyperframe:Hyperframe 工程（适合作为模块继续复用）json:JSON 数据（适合程序处理 / 自定义渲染）preview:预览图 / 预览工程（适合先确认效果）
Show full SKILL.md (187 more words)Show less
Output Rules
- Keep the composition root transparent for overlay outputs.
- Use
container: nonefor standalone bubble motion without an app shell. - Use
container: wechat|telegram|messengerwhen the platform chrome is part of the story. - Treat uploaded avatars as content assets and copy them into
public/for the render bundle. - Prefer preset avatars when the user does not specify avatar files. Screenshot avatars may help identify participants, but recommend user-provided avatar files before attempting to crop or recreate avatars from screenshots.
- Keep config-driven behavior explicit; do not silently switch style families.
Question Policy
- Prefer inference first, questions second.
- If the user gives enough information for a sensible default, continue and clearly state the assumptions.
- Ask only for missing high-impact choices.
- Keep the question set to 1-3 items.
- Prefer user-facing wording over technical wording.
- Ask about
deliveryFormatusing格式（场景描述）labels, not internal render terms. - If the user says they do not care, continue with defaults and note them in the result.
Resources
- Transcript format:
references/input-format.md - Config fields and examples:
references/config-schema.md - Question strategy:
references/question-strategy.md - Output commands and targets:
references/output-modes.md - Transcript/config to spec:
scripts/build_chat_overlay_spec.py - Remotion bundle preparation:
scripts/prepare_chat_overlay_bundle.py - Remotion render template:
assets/remotion-template/
© nexu-io, 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 32 other files (scripts, references, assets) in skills/chat-motion-overlay of nexu-io/open-design.
- SKILL.md
- agents/openai.yaml
- assets/avatar-library/female-bunny-pink.png
- assets/avatar-library/female-cat-orange.png
- assets/avatar-library/female-fox-yellow.png
- assets/avatar-library/male-bear-mint.png
- assets/avatar-library/male-koala-lilac.png
- assets/avatar-library/male-penguin-blue.png
- assets/examples/chat-transcript.txt
- assets/examples/config-wechat-phone.json
- assets/remotion-template/package.json
- assets/remotion-template/remotion.config.ts
- assets/remotion-template/src/Root.tsx
- assets/remotion-template/src/chatSpec.ts
- assets/remotion-template/src/components
- … and 18 more
Open the folder on GitHubat commit 17e2559
Compare with similar skills
Chat Motion Overlay Generator 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 |
|---|---|---|---|---|---|---|
| Chat Motion Overlay Generator this skillnexu-io/open-design | 100k | — | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills | 8.5k | 6 repos | ~3.2k | Automated safety check: Notes | Apache-2.0 | |
| Video ShotcraftVincentwei1021/video-shotcraft | 11k | — | ~2.6k | Automated safety check: Pass | Apache-2.0 | |
| HyperFrames Video Entry Pointheygen-com/hyperframes | 60k | 3 repos | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| Create Remotion GeistMarve10s/Better-Fullstack | 756 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Product Film Builder (Remotion)Rieranthony/product-film-skill | 409 | — | ~1.4k | Automated safety check: Pass | MIT |
Similar skills
- Official
Video Shotcraft
Vincentwei1021/video-shotcraft
Makes cinematic product videos with Remotion from shot recipe cards, a ready template, real page screenshots, camera moves and sound design, or builds a single animated shot.
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.
Create Remotion Geist
Marve10s/Better-Fullstack
Create Remotion videos using the Geist design system aesthetic.
Product Film Builder (Remotion)
Rieranthony/product-film-skill
Builds a showreel-grade product film in Remotion using the product's own design tokens, components and voice, from a guided interview through a verified final render.
Motion Video in Remotion
ooiyeefei/ccc
Builds marketing and explainer videos in Remotion from rendered scenes, with one real product capture as proof, and cuts them for each platform's formats.
More from nexu-io/open-design
All 245 skills in this repoHumanize PPT
nexu-io/open-design
Turns raw notes into a talk-ready slide outline with per-page image, diagram or video decisions, then checks the rendered deck against that outline.
Last 30 Days Trend Research
nexu-io/open-design
Produces a cited Markdown briefing on recent community sentiment and social reaction to a topic, labeling every source it could not actually check.
OpenDesign Contribution Flow
nexu-io/open-design
Helps newcomers contribute to OpenDesign: ship a skill or design system, translate docs, fix docs or report a bug, ending in a pull request or issue.
Flowai Live Dashboard Template
nexu-io/open-design
Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity…
Hatch Pet
nexu-io/open-design
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references.
HTML PPT Studio
nexu-io/open-design
Builds slide decks as static HTML files from a token-based design system, with themes, layouts, animations and a presenter mode.
Related
Categories
Questions about Chat Motion Overlay Generator
What does Chat Motion Overlay Generator do?
Turns a chat transcript or screenshot into a configurable animated chat clip, rendered as a Remotion bundle with optional transparency. This skill normalizes a chat transcript or a screenshot of one into a structured message format, inferring participants and sides from visible avatars without recreating the actual avatar images unless the user provides or asks for them specifically. It then has you choose a scene setup — a container style such as none, WeChat, Telegram, or Messenger, an avatar mode, an optional device frame, and when nicknames should appear.
When should I use Chat Motion Overlay Generator?
Chat Motion Overlay Generator fits situations like: creating a short chat-bubble clip from a screenshot for a demo or social video; recreating a messenger-style conversation as an animated overlay; producing a transparent chat overlay to composite over other footage.
How do I install Chat Motion Overlay Generator in Claude Code?
Run `npx skills add nexu-io/open-design --skill chat-motion-overlay -a claude-code`. Or copy the skill folder (skills/chat-motion-overlay in nexu-io/open-design) into .claude/skills/chat-motion-overlay in your project. Claude Code loads it when a task matches its description.
How do I install Chat Motion Overlay Generator in Codex?
Run `npx skills add nexu-io/open-design --skill chat-motion-overlay -a codex`. Or copy the skill folder (skills/chat-motion-overlay in nexu-io/open-design) into .agents/skills/chat-motion-overlay in your project. Codex loads it when a task matches its description.
Can I use Chat Motion Overlay Generator 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 nexu-io/open-design --skill chat-motion-overlay -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chat-motion-overlay, .gemini/skills/chat-motion-overlay, .github/skills/chat-motion-overlay and .opencode/skills/chat-motion-overlay in your project.
What does Chat Motion Overlay Generator need to run?
Going by SKILL.md and its folder, Chat Motion Overlay Generator needs TypeScript for the scripts in its folder. Our summary lists: A Node.js environment to run the bundled Remotion build scripts.
Does Chat Motion Overlay Generator access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Chat Motion Overlay Generator 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 Chat Motion Overlay Generator use?
Chat Motion Overlay Generator 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 Chat Motion Overlay Generator use?
About 1.1k tokens (SKILL.md is roughly 4.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 5.9k tokens, read only when the agent opens those files.
What are the alternatives to Chat Motion Overlay Generator?
Skills that share tags, products or a category with Chat Motion Overlay Generator: Stitch to Remotion Walkthrough Videos (google-labs-code/stitch-skills, 8.5k stars), Video Shotcraft (Vincentwei1021/video-shotcraft, 11k stars), HyperFrames Video Entry Point (heygen-com/hyperframes, 60k stars) and Create Remotion Geist (Marve10s/Better-Fullstack, 756 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Chat Motion Overlay Generator?
nexu-io (a GitHub organization) maintains it in nexu-io/open-design, which has 100,280 GitHub stars. The repository holds 245 skills in this directory. The repository was last updated on October 10, 2026.
Source: nexu-io/open-design on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.