Tencent SkillHub · Communication & Collaboration

WhatsApp video maker

Create animated WhatsApp chat videos with realistic iPhone, dark mode UI, typing indicators, read receipts, and auto-scrolling for social media formats.

skill openclawclawhub Free

0 Downloads

0 Stars

0 Installs

0 Score

High Signal

Create animated WhatsApp chat videos with realistic iPhone, dark mode UI, typing indicators, read receipts, and auto-scrolling for social media formats.

⬇ 0 downloads ★ 0 stars Unverified but indexed

Install for OpenClaw

Quick setup

Download the package from Yavira.
Extract the archive and review SKILL.md first.
Import or place the package into your OpenClaw setup.

Requirements

Target platform: OpenClaw
Install method: Manual import
Extraction: Extract archive
Prerequisites: OpenClaw
Primary doc: SKILL.md

Package facts

Download mode: Yavira redirect
Package format: ZIP package
Source platform: Tencent SkillHub
What's included: SKILL.md, generate.sh, Root.tsx, skill.json, template.tsx

Validation

Use the Yavira download entry.
Review SKILL.md after the package is downloaded.
Confirm the extracted package contains the expected setup assets.

Install with your agent

Agent handoff

Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.

Download the package from Yavira.
Extract it into a folder your agent can access.
Paste one of the prompts below and point your agent at the extracted folder.

New install

I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.

Upgrade existing

I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.

Open Send to Agent page Open JSON manifest Open Markdown brief

Trust & source

Release facts

Source: Tencent SkillHub
Verification: Indexed source record
Version: 1.0.0

Provenance

Publisher: danpeg
Source page: View original listing
Canonical URL: Open canonical page

Documentation

ClawHub primary doc Primary doc: SKILL.md 17 sections Open source page

WhatsApp Video Skill

Create animated WhatsApp-style chat videos using Remotion. Perfect for X, TikTok, Instagram Reels.

Features

📱 Realistic iPhone frame with Dynamic Island 💬 WhatsApp dark mode UI (accurate colors, bubbles, timestamps) 📜 Auto-scrolling as messages extend 🔤 Large, readable fonts (optimized for mobile viewing) 🎵 Message notification sounds ✨ Spring animations on message appearance ⌨️ Typing indicator ("..." bubbles) 🔗 Link preview cards ✅ Read receipts (blue checkmarks) Bold and code formatting support

Default Settings

Aspect ratio: 4:5 (1080×1350) - optimal for X/Instagram feed No intro/outro - starts and ends with the chat 2x fonts - readable on mobile devices Auto-scroll - keeps all messages visible

Prerequisites

This skill requires the Remotion Best Practices skill: npx skills add remotion-dev/skills -a claude-code -y -g

Quick Start

cd ~/Projects/remotion-test Edit the conversation in src/WhatsAppVideo.tsx, then render: npx remotion render WhatsAppDemo out/my-video.mp4 --concurrency=4

1. Define Your Messages

Edit the ChatMessages component in src/WhatsAppVideo.tsx: // Incoming message (from assistant) <Message text="Your message text here" isOutgoing={false} time="8:40 AM" delay={125} // Frame when message appears (30fps) /> // Outgoing message (from user) <Message text="Your outgoing message" isOutgoing={true} time="8:41 AM" delay={200} showCheck={true} /> // Typing indicator (shows "..." bubbles) <TypingIndicator delay={80} duration={45} />

2. Timing Guide

30 fps = 30 frames per second delay={30} = appears at 1 second delay={60} = appears at 2 seconds duration={45} = lasts 1.5 seconds Typical flow: First message: delay={20} (~0.7s) Typing indicator: delay={80}, duration={45} Response: delay={125} (after typing ends) Next typing: delay={175}, duration={45} Next response: delay={220}

3. Adjust Scrolling

In ChatMessages, update the scroll interpolation based on your message count: const scrollAmount = interpolate( frame, [scrollStart, scrollStart + 60, messageFrame, lastFrame], [0, firstScroll, firstScroll, finalScroll], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); Increase scroll values if messages overflow.

4. Text Formatting

Messages support: Bold: **bold text** Code: backticks around text Line breaks: \n in the string Emojis: just use them directly 🎬

5. Customizing the Header

In ChatHeader component, change: Name: Pokey 🐡 → your assistant name Status: online Avatar emoji

6. Update Duration

In Root.tsx, set durationInFrames to match your video length: Count frames until last message appears + ~100 frames buffer At 30fps: 450 frames = 15 seconds

7. Render

# Standard render npx remotion render WhatsAppDemo out/video.mp4 --concurrency=4 # Higher quality npx remotion render WhatsAppDemo out/video.mp4 --codec h264 --crf 18 # Preview in browser npm run dev

Platform Dimensions

Edit Root.tsx to change dimensions: PlatformDimensionsAspect RatioUse CaseX/Instagram feed1080×13504:5Default, most visibleX/TikTok/Reels1080×19209:16Full verticalX square1080×10801:1UniversalYouTube/X landscape1920×108016:9Horizontal

Project Structure

~/Projects/remotion-test/ ├── src/ │ ├── WhatsAppVideo.tsx # Main video component │ └── Root.tsx # Composition config ├── public/ │ └── sounds/ │ ├── pop.mp3 # Message received │ └── send.mp3 # Message sent └── out/ # Rendered videos

Sound Effects

Sounds are triggered with Sequence: <Sequence from={125}> <Audio src={staticFile("sounds/pop.mp3")} volume={0.5} /> </Sequence>

Tips

Preview while editing: Run npm run dev to see changes live Frame-by-frame: Use timeline scrubber to check timing Keep messages concise: Long messages may need scroll adjustment Test on mobile: Check readability at actual size

Asking Pokey to Generate

Just describe the conversation: "WhatsApp video: me asking you to [X]" "Make a chat video showing [conversation]" Pokey will write the messages, set timing, render, and send the MP4.

Category context

Messaging, meetings, inboxes, CRM, and teammate communication surfaces.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package

2 Files1 Docs1 Scripts1 Config

SKILL.md Primary doc
generate.sh Scripts
skill.json Config
Root.tsx Files
template.tsx Files