# Send WhatsApp video maker to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - 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. ## Suggested prompts ### New install ```text 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 ```text 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. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "whatsapp-video-mockup", "name": "WhatsApp video maker", "source": "tencent", "type": "skill", "category": "通讯协作", "sourceUrl": "https://clawhub.ai/danpeg/whatsapp-video-mockup", "canonicalUrl": "https://clawhub.ai/danpeg/whatsapp-video-mockup", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/whatsapp-video-mockup", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=whatsapp-video-mockup", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md", "generate.sh", "Root.tsx", "skill.json", "template.tsx" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "whatsapp-video-mockup", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-01T20:40:37.311Z", "expiresAt": "2026-05-08T20:40:37.311Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=whatsapp-video-mockup", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=whatsapp-video-mockup", "contentDisposition": "attachment; filename=\"whatsapp-video-mockup-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "whatsapp-video-mockup" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/whatsapp-video-mockup" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/whatsapp-video-mockup", "downloadUrl": "https://openagent3.xyz/downloads/whatsapp-video-mockup", "agentUrl": "https://openagent3.xyz/skills/whatsapp-video-mockup/agent", "manifestUrl": "https://openagent3.xyz/skills/whatsapp-video-mockup/agent.json", "briefUrl": "https://openagent3.xyz/skills/whatsapp-video-mockup/agent.md" } } ``` ## Documentation ### 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) // Outgoing message (from user) // Typing indicator (shows "..." bubbles) ### 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: ### 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. ## Trust - Source: tencent - Verification: Indexed source record - Publisher: danpeg - Version: 1.0.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-01T20:40:37.311Z - Expires at: 2026-05-08T20:40:37.311Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/whatsapp-video-mockup) - [Send to Agent page](https://openagent3.xyz/skills/whatsapp-video-mockup/agent) - [JSON manifest](https://openagent3.xyz/skills/whatsapp-video-mockup/agent.json) - [Markdown brief](https://openagent3.xyz/skills/whatsapp-video-mockup/agent.md) - [Download page](https://openagent3.xyz/downloads/whatsapp-video-mockup)