Wechat 2d Render

Renders WeChat-style 2D chat motion videos using the wechat-2d project and Remotion. It clones or updates the GitHub repo, installs dependencies via pnpm, and exports a ProRes 4444 transparent background video by default. The skill handles the entire pipeline from repo setup to final render, including browser setup and frame-by-frame animation generation. Worth knowing that Remotion renders frames in parallel and out of order, so the underlying project is built around deterministic frame-specific data rather than sequential state. Useful if you need programmatic chat animation exports without manual UI fiddling, especially for Chinese language WeChat-style content.

skills.sh installs: 930
GitHub stars: 1.6K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vibe-motion/skills --skill wechat-2d-render --agent claude-code

Installs into .claude/skills of the current project.

Files

WeChat 2D Render

Workflow

Use scripts/render_wechat_2d.sh from this skill.
Pass workspace_dir as the first argument when the user specifies a folder; otherwise use the current directory.
Pass output_path as the second argument when the user specifies output; otherwise use out/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; }

SKILL.md on GitHub