Install Wechat 2d Render
Pick your agent. Every command is ready to paste.
npx skills add vibe-motion/skills --skill wechat-2d-renderThe open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.
01
Install it
Run the command above, or upload the folder in Claude.
02
Ask naturally
Describe the task. Your agent loads wechat-2d-render when the request matches its description.
03
Name it if needed
If it does not trigger, say “use the wechat-2d-render skill”. In Codex, type $wechat-2d-render.
WeChat 2D Render
Workflow
- Use
scripts/render_wechat_2d.shfrom this skill. - Pass
workspace_diras the first argument when the user specifies a folder; otherwise use the current directory. - Pass
output_pathas the second argument when the user specifies output; otherwise useout/wechat-2d-transparent.mov. - Pass a props JSON path as the third argument when the user provides custom Remotion props; otherwise use
shared/project/render-presets/default.json. - Run the script and wait for completion.
- Return the final absolute output path printed by the script.
Command
bash scripts/render_wechat_2d.sh [workspace_dir] [output_path] [props_file]
Installed Skill Resolution
Use the installed skill copy, not the source repo checkout:
skill_dir=""
for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
if [ -d "$base/skills/wechat-2d-render" ]; then
skill_dir="$base/skills/wechat-2d-render"
break
fi
done
[ -n "$skill_dir" ] || { echo "wechat-2d-render skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }
bash "$skill_dir/scripts/render_wechat_2d.sh" "$(pwd)" "$(pwd)/out/wechat-2d-transparent.mov"
Behavior
- Reuse local repo if
workspace_dir/wechat-2dexists; otherwise clone from GitHub. - Track remote default branch (
origin/HEAD) when updating an existing repo. - Install dependencies with
pnpm install; ifpnpmis missing, enable it throughcorepack. - Run the project Remotion scripts:
pnpm run remotion:ensure-browserREMOTION_OUTPUT=... REMOTION_PROPS_FILE=... pnpm run remotion:render
- Default render target is the active composition from
shared/project/projectConfig.js, currently thewechat-chat-motionplugin viaScaffoldDemo30fps. - Default output is ProRes 4444 with
yuva444p10lepixel format and PNG image format, suitable for transparent-background workflows.
Project Notes
- The project uses a scaffold/plugin split:
preview/*for local UI controls and browser preview.remotion/*for Remotion entry wrappers.shared/scaffold/*for common runtime.shared/project/*for plugin and composition registry.shared/features/demoMotion/*for the WeChat chat scene.
- Animation state must be deterministic per frame. Remotion renders frames in parallel and out of order, so do not rely on timers, mutable cursors, previous renders, or render order.
- Frame-specific data should be built from
{frame, fps, loop, sceneContext, pluginParams}inbuildSceneProps. - Keep
videoWidthandvideoHeightas layout props; use a props JSON file for custom sizes.
Requirements
gitnodecorepackorpnpm- network access for clone/update and dependency install
Tips for Wechat 2d Render
- • Start a fresh session after installing so your agent picks up the new skill.
- • This skill ships scripts. Read them before the first run, and run it in a project without secrets first.
- • It bundles reference files. The agent reads them only when needed, so they cost no context until then.
- • It is part of a pack with 15 skills. Install only the ones you need with --skill to keep triggers precise.
- • If two skills overlap, mention the one you want by name.
Questions about Wechat 2d Render
What does the Wechat 2d Render skill do?
Clone or update https://github.com/sxhzju/wechat-2d and render the default WeChat-style 2D chat motion video with Remotion. Use when users ask for 微信聊天动画, wechat 2d chat render, 微信视频消息动效, or exporting the default demo from the wechat-2d project.
How do I install Wechat 2d Render?
Run "npx skills add vibe-motion/skills --skill wechat-2d-render" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.
Does Wechat 2d Render work in Cursor and Codex?
Yes. Wechat 2d Render uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.
Is Wechat 2d Render free?
Wechat 2d Render is open source on GitHub. It is free to install; check the license before commercial use.
Who made Wechat 2d Render?
Wechat 2d Render is published by vibe-motion in the vibe-motion/skills repository, together with 14 other skills.



