wechat-2d-render — Claude Code skill: render a WeChat chat clip
Pulls the wechat-2d project and renders its WeChat-style 2D chat animation with Remotion. Useful when you need a clip to drop into an edit.
npx skills add vibe-motion/skills --skill wechat-2d-render -a claude-codeWhat wechat-2d-render does
Everything goes through one script, scripts/render_wechat_2d.sh. A workspace folder and an output path come in as the first two arguments; skip them and the skill works in the current directory and writes to out/wechat-2d-transparent.mov. The third argument is a JSON file of Remotion props, defaulting to shared/project/render-presets/default.json.
If workspace_dir/wechat-2d already exists, the local copy is reused. Otherwise it is cloned from GitHub, and updates follow the origin/HEAD branch. Dependencies come in with pnpm install, and corepack kicks in when pnpm is absent. Then the script runs pnpm run remotion:ensure-browser and the render itself with REMOTION_OUTPUT and REMOTION_PROPS_FILE set.
The file comes out as ProRes 4444 in yuva444p10le pixel format with PNG frames, so the background stays transparent. You need git, node, corepack or pnpm, and a network connection — cloning and package install both fail without it. Sizes go through the props JSON; videoWidth and videoHeight stay layout props.
What it helps with
- Render the WeChat chat animation demo from the project
- Re-render the scene after editing
shared/features/demoMotion - Deliver a clip with a transparent background for editing
- Swap the default preset for your own Remotion props
- Fast-forward a local wechat-2d copy to
origin/HEAD
Example prompts for the agent
- Render the WeChat chat animation into
out/final.mov - Run the default wechat-2d demo in this directory
- Render using the props in
presets/mobile.json
How to install wechat-2d-render
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill wechat-2d-render -a claude-code2Manually: put the files in place
~/.claude/skills/wechat-2d-render/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/wechat-2d-render/
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill wechat-2d-render -a codex2Manually: put the files in place
.agents/skills/wechat-2d-render/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill wechat-2d-render -a cursor2Manually: put the files in place
.cursor/skills/wechat-2d-render/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vibe-motion/skills wechat-2d-render2Manually: put the files in place
.github/skills/wechat-2d-render/SKILL.md1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill wechat-2d-render -a gemini-cli2Platform CLI
gemini skills install https://github.com/vibe-motion/skills --path wechat-2d-renderManually: put the files in place
.devin/skills/wechat-2d-render/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill wechat-2d-render -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about wechat-2d-render
How do I install wechat-2d-render in Claude Code?
Run npx skills add vibe-motion/skills --skill wechat-2d-render -a claude-code, then confirm the skill landed at ~/.claude/skills/wechat-2d-render/SKILL.md.
What does wechat-2d-render do?
It clones or updates the wechat-2d repo and renders the default WeChat-style chat animation as a Remotion video, printing the absolute path of the result.
What does the skill need to run?
git, node, and either corepack or pnpm, plus network access for cloning and installing dependencies.
