npx skills add vibe-motion/skills --skill wechat-2d-render
nolangz/skills · Archived
wechat-2d-render
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.
Installation
npx skills add nolangz/skills --skill wechat-2d-render
Stronger alternatives
This repository is archived — consider an actively maintained alternative.
为 SVG 矢量图创建?
2 installsApply Disney's 12 principles as practical design and engineering rules for procedural animation…
1 installsClone or update https://github.com/vibe-motion/threejs-earth and render the Three.js Earth rout…
1 installsClone or update https://github.com/sxhzju/ruler-progress-animator and render a ruler progress v…
1 installsSimilar popular skills
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
Posts content to WeChat Official Account (微信?
33.4K installs把 Markdown 转成可粘贴到微信?
12.6K installsSummarizes WeChat group chat highlights into a structured digest using the local wx-cli binary …
8.8K installsExtract metadata and content from WeChat Official Account articles. Use when user needs to pars…
3.8K installs公众号文章自动化写作流程。支持资料搜索、文章撰写、爆款标题生成、排版优化。当用户提到写公众号、…
3.3K installsPublish Markdown/HTML articles to WeChat Official Account (微信? 新手引导:输?
2.6K installsAlso in this package
Other skills from nolangz/skills.
npx skills add nolangz/skills
More details
Agent compatibility
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Also listed on
Alternate registries and mirrors of this skill.
Repository health
main
Package contents
Files included with this skill beyond the listing page.
-
skill md
SKILL.md3,119 B -
docs
SUMMARY.md297 B
History
- First seen on skills.sh
- First recorded snapshot · 1 installs
SKILL.md
WeChat 2D Render
Workflow
- Use
scripts/renderwechat2d.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-browser - REMOTIONOUTPUT=... REMOTIONPROPS_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