Agent skill · design visual · sundial-org
whatsapp-video-mockup
whatsapp-video-mockup — an agent skill for coding agents.
Why this skill is useful
Provides specific Remotion commands and configurations for creating WhatsApp-style videos that the AI wouldn't reliably generate on its own.
What it needs
Requires remotion installed locally. About 3k tokens when loaded. Last updated 2026-03-07. 639 stars on the source repository.
What this skill does
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: Quick Start Edit the conversation in src/WhatsAppVideo.tsx, then render: How to Create a New Video 1. Define Your Messages Edit the ChatMessages component in src/WhatsAppVideo.tsx: 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: 1. First message: delay={20} (~0.7s) 2. Typing indicator: delay={80}, duration={45} 3. Response: delay={125} (after typing ends) 4. Next typing: delay={175}, duration={45} 5. Next response: delay={220} 3. Adjust Scrolling In ChatMessages, update the scroll interpolation based on your message count: 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sundial-org/whatsapp-video-mockup