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.
npx -y skills add vibe-motion/skills --skill wechat-2d-render --agent claude-codeInstalls into .claude/skills of the current project.
scripts/render_wechat_2d.sh from this skill.workspace_dir as the first argument when the user specifies a folder; otherwise use the current directory.output_path as the second argument when the user specifies output; otherwise use out/wechat-2d-transparent.mov.shared/project/render-presets/default.json.bash scripts/render_wechat_2d.sh [workspace_dir] [output_path] [props_file]
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"
workspace_dir/wechat-2d exists; otherwise clone from GitHub.origin/HEAD) when updating an existing repo.pnpm install; if pnpm is missing, enable it through corepack.pnpm run remotion:ensure-browserREMOTION_OUTPUT=... REMOTION_PROPS_FILE=... pnpm run remotion:rendershared/project/projectConfig.js, currently the wechat-chat-motion plugin via ScaffoldDemo30fps.yuva444p10le pixel format and PNG image format, suitable for transparent-background workflows.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.{frame, fps, loop, sceneContext, pluginParams} in buildSceneProps.videoWidth and videoHeight as layout props; use a props JSON file for custom sizes.gitnodecorepack or pnpmleonxlnx/taste-skill
supercent-io/skills-template
supercent-io/skills-template