Skip to content
alyn
vibe-motion

Wechat 2d Render skill

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.

$npx skills add vibe-motion/skills --skill wechat-2d-render
View this skill on GitHubvibe-motion/skills/wechat-2d-render/SKILL.md
Pack stars
1,596
Pack installs
11k
Alyn Score
60/99
Updated
36 days ago
– views – installs via Alyn

Install Wechat 2d Render

Pick your agent. Every command is ready to paste.

$npx skills add vibe-motion/skills --skill wechat-2d-render

The 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.

The skill itself

SKILL.md

FolderGitHub

WeChat 2D Render

Workflow

  1. Use scripts/render_wechat_2d.sh from this skill.
  2. Pass workspace_dir as the first argument when the user specifies a folder; otherwise use the current directory.
  3. Pass output_path as the second argument when the user specifies output; otherwise use out/wechat-2d-transparent.mov.
  4. Pass a props JSON path as the third argument when the user provides custom Remotion props; otherwise use shared/project/render-presets/default.json.
  5. Run the script and wait for completion.
  6. 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-2d exists; otherwise clone from GitHub.
  • Track remote default branch (origin/HEAD) when updating an existing repo.
  • Install dependencies with pnpm install; if pnpm is missing, enable it through corepack.
  • Run the project Remotion scripts:
    • pnpm run remotion:ensure-browser
    • REMOTION_OUTPUT=... REMOTION_PROPS_FILE=... pnpm run remotion:render
  • Default render target is the active composition from shared/project/projectConfig.js, currently the wechat-chat-motion plugin via ScaffoldDemo30fps.
  • Default output is ProRes 4444 with yuva444p10le pixel 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} in buildSceneProps.
  • Keep videoWidth and videoHeight as layout props; use a props JSON file for custom sizes.

Requirements

  • git
  • node
  • corepack or pnpm
  • 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.

Similar skills. From other creators.