CAT
/Skills
SkillsMCPMarketplacesDigestToolsAdvertise

This week in Claude

Every Monday: Claude Code, Agent SDK, MCP, and the Anthropic platform moves worth your time.

Skills by Category
Frontend DevelopmentBackend & APIsTesting & QASecurityDevOps & CI/CDGit & Pull RequestsDocumentationCode Review & QualityAI & Agent BuildingSkill Development
MCP Servers by Category
Sales & MarketingWeb & Browser AutomationDatabasesAI & LLM ToolsCloud & InfrastructureCommunication & MessagingDeveloper ToolsDesign & CreativeDocuments & KnowledgeSearch & Web Crawling
Marketplaces by Category
AI Agents & OrchestrationLLM IntegrationDevelopment ToolsFrontend & UIBackend & APIsDatabasesTesting & Code QualityDevOps & CloudSecurity & ComplianceGit & Version Control

Cross AI Tools

Discover Claude Code plugins, extensions, and tools. Automatically updated directory of Anthropic Claude AI marketplaces with development tools, productivity plugins, and integrations.

Resources

  • Browse Skills
  • Browse MCP Servers
  • Browse Marketplaces
  • Plugins Reference

Community

  • About
  • Tools
  • Feedback
  • Privacy Policy
  • Advertise

Built for the Claude Code community with Claude Code by @mertduzgun

Independent project, not affiliated with Anthropic

Wechat 2d Render

vibe-motion/skills
250 installs623 stars
Summary

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.

Install to Claude Code

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

Installs into .claude/skills of the current project.

CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
Keep your Mac awake
Keep your Mac awake
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Context.devContext.dev
Context.dev
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make money from your Skills
Make money from your Skills
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
AppSignal
AppSignal
Monitor with ease. Code with confidence.
Start Free Trial →
CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
Keep your Mac awake
Keep your Mac awake
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Context.devContext.dev
Context.dev
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make money from your Skills
Make money from your Skills
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
AppSignal
AppSignal
Monitor with ease. Code with confidence.
Start Free Trial →
Files
SKILL.mdView on GitHub

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
Featured
CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
Keep your Mac awake
Keep your Mac awake
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Context.devContext.dev
Context.dev
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make money from your Skills
Make money from your Skills
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
AppSignal
AppSignal
Monitor with ease. Code with confidence.
Start Free Trial →
Categories
Design & UI/UX
First SeenJun 3, 2026
View on GitHub

Recommended

More Design & UI/UX →
figma-create-design-system-rules

figma/mcp-server-guide

figma create design system rules
1.6k
1.5k
figma-create-design-system-rules

openai/skills

figma create design system rules
906
21.1k
figma-create-design-system-rules

nexu-io/open-design

figma create design system rules
573
57.2k
high-end-visual-design

leonxlnx/taste-skill

Premium design system enforcing high-end agency aesthetics with strict anti-patterns and motion choreography.
87.4k
31.7k
frontend-design-system

supercent-io/skills-template

Production-grade UI design with design tokens, layout rules, motion guidance, and accessibility validation.
8.5k
88
design-system

supercent-io/skills-template

Production-grade UI design system with design tokens, layout rules, motion guidelines, and accessibility validation.
3.2k
88