Whatsapp Video Mockup

What This Skill Does

The WhatsApp Video Mockup skill by danpeg is a specialized tool designed to create professional-grade, animated WhatsApp-style chat conversations using the Remotion framework. This skill automates the visual assembly of chat interfaces, complete with realistic iPhone framing, Dynamic Island aesthetics, and authentic dark-mode WhatsApp styling. It is specifically optimized for social media platforms like X, Instagram Reels, and TikTok, providing a high-quality visual narrative tool for creators who need to demonstrate conversations, customer testimonials, or storytelling content without manual video editing.

Installation

To begin, ensure you have the required dependencies for Remotion. Run the following installation command in your terminal:

npx skills add remotion-dev/skills -a claude-code -y -g

Next, install the skill specifically via the ClawHub repository:

clawhub install openclaw/skills/skills/danpeg/whatsapp-video-mockup

Once installed, navigate to your project directory (e.g., cd ~/Projects/remotion-test) to start configuring your chat sequences in src/WhatsAppVideo.tsx.

Use Cases

• Social Media Marketing: Create viral-ready content showcasing product feedback or engaging conversational hooks.
• Tutorials & Demos: Build interactive walkthroughs that simulate a support chat or a guide delivered via messaging.
• Storytelling: Develop fictional chat scenarios for creative projects or character-driven social media content.
• Professional Presentations: Display simulated client interactions or feedback loops in a polished, readable format.

Example Prompts

1. "Create a WhatsApp conversation mockup where a customer asks about the status of their order and the support agent responds with a tracking link and a polite follow-up."
2. "Generate a 15-second chat sequence showing a fast-paced brainstorming session between two project partners, including typing indicators and emojis."
3. "Construct a conversation mockup that highlights a testimonial, where the user sends a positive review and the company responds with an appreciative message and a discount code."

Tips & Limitations

• Timing: Remember that the video operates at 30fps. Calculate your delay values carefully to ensure smooth, natural pacing. A common mistake is crowding the frames; allow at least 45 frames for a natural reading pause.
• Responsiveness: Always adjust the scrollAmount in your configuration if your conversation exceeds the default viewport height to prevent messages from being cut off.
• Limitations: This skill is strictly for visual mockups. It does not interface with the actual WhatsApp API, meaning it cannot pull real-time chat data from your personal device. All messages must be manually defined in your source code, and rendering requires an active development environment.