{
  "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": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/whatsapp-video-mockup",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=whatsapp-video-mockup",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "generate.sh",
      "Root.tsx",
      "skill.json",
      "template.tsx"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "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."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/whatsapp-video-mockup",
    "agentPageUrl": "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"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "WhatsApp Video Skill",
        "body": "Create animated WhatsApp-style chat videos using Remotion. Perfect for X, TikTok, Instagram Reels."
      },
      {
        "title": "Features",
        "body": "📱 Realistic iPhone frame with Dynamic Island\n💬 WhatsApp dark mode UI (accurate colors, bubbles, timestamps)\n📜 Auto-scrolling as messages extend\n🔤 Large, readable fonts (optimized for mobile viewing)\n🎵 Message notification sounds\n✨ Spring animations on message appearance\n⌨️ Typing indicator (\"...\" bubbles)\n🔗 Link preview cards\n✅ Read receipts (blue checkmarks)\nBold and code formatting support"
      },
      {
        "title": "Default Settings",
        "body": "Aspect ratio: 4:5 (1080×1350) - optimal for X/Instagram feed\nNo intro/outro - starts and ends with the chat\n2x fonts - readable on mobile devices\nAuto-scroll - keeps all messages visible"
      },
      {
        "title": "Prerequisites",
        "body": "This skill requires the Remotion Best Practices skill:\n\nnpx skills add remotion-dev/skills -a claude-code -y -g"
      },
      {
        "title": "Quick Start",
        "body": "cd ~/Projects/remotion-test\n\nEdit the conversation in src/WhatsAppVideo.tsx, then render:\n\nnpx remotion render WhatsAppDemo out/my-video.mp4 --concurrency=4"
      },
      {
        "title": "1. Define Your Messages",
        "body": "Edit the ChatMessages component in src/WhatsAppVideo.tsx:\n\n// Incoming message (from assistant)\n<Message\n  text=\"Your message text here\"\n  isOutgoing={false}\n  time=\"8:40 AM\"\n  delay={125}  // Frame when message appears (30fps)\n/>\n\n// Outgoing message (from user)\n<Message\n  text=\"Your outgoing message\"\n  isOutgoing={true}\n  time=\"8:41 AM\"\n  delay={200}\n  showCheck={true}\n/>\n\n// Typing indicator (shows \"...\" bubbles)\n<TypingIndicator delay={80} duration={45} />"
      },
      {
        "title": "2. Timing Guide",
        "body": "30 fps = 30 frames per second\ndelay={30} = appears at 1 second\ndelay={60} = appears at 2 seconds\nduration={45} = lasts 1.5 seconds\n\nTypical flow:\n\nFirst message: delay={20} (~0.7s)\nTyping indicator: delay={80}, duration={45}\nResponse: delay={125} (after typing ends)\nNext typing: delay={175}, duration={45}\nNext response: delay={220}"
      },
      {
        "title": "3. Adjust Scrolling",
        "body": "In ChatMessages, update the scroll interpolation based on your message count:\n\nconst scrollAmount = interpolate(\n  frame,\n  [scrollStart, scrollStart + 60, messageFrame, lastFrame],\n  [0, firstScroll, firstScroll, finalScroll],\n  { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" }\n);\n\nIncrease scroll values if messages overflow."
      },
      {
        "title": "4. Text Formatting",
        "body": "Messages support:\n\nBold: **bold text**\nCode: backticks around text\nLine breaks: \\n in the string\nEmojis: just use them directly 🎬"
      },
      {
        "title": "5. Customizing the Header",
        "body": "In ChatHeader component, change:\n\nName: Pokey 🐡 → your assistant name\nStatus: online\nAvatar emoji"
      },
      {
        "title": "6. Update Duration",
        "body": "In Root.tsx, set durationInFrames to match your video length:\n\nCount frames until last message appears + ~100 frames buffer\nAt 30fps: 450 frames = 15 seconds"
      },
      {
        "title": "7. Render",
        "body": "# Standard render\nnpx remotion render WhatsAppDemo out/video.mp4 --concurrency=4\n\n# Higher quality\nnpx remotion render WhatsAppDemo out/video.mp4 --codec h264 --crf 18\n\n# Preview in browser\nnpm run dev"
      },
      {
        "title": "Platform Dimensions",
        "body": "Edit Root.tsx to change dimensions:\n\nPlatformDimensionsAspect RatioUse CaseX/Instagram feed1080×13504:5Default, most visibleX/TikTok/Reels1080×19209:16Full verticalX square1080×10801:1UniversalYouTube/X landscape1920×108016:9Horizontal"
      },
      {
        "title": "Project Structure",
        "body": "~/Projects/remotion-test/\n├── src/\n│   ├── WhatsAppVideo.tsx   # Main video component\n│   └── Root.tsx            # Composition config\n├── public/\n│   └── sounds/\n│       ├── pop.mp3         # Message received\n│       └── send.mp3        # Message sent\n└── out/                    # Rendered videos"
      },
      {
        "title": "Sound Effects",
        "body": "Sounds are triggered with Sequence:\n\n<Sequence from={125}>\n  <Audio src={staticFile(\"sounds/pop.mp3\")} volume={0.5} />\n</Sequence>"
      },
      {
        "title": "Tips",
        "body": "Preview while editing: Run npm run dev to see changes live\nFrame-by-frame: Use timeline scrubber to check timing\nKeep messages concise: Long messages may need scroll adjustment\nTest on mobile: Check readability at actual size"
      },
      {
        "title": "Asking Pokey to Generate",
        "body": "Just describe the conversation:\n\n\"WhatsApp video: me asking you to [X]\"\n\"Make a chat video showing [conversation]\"\n\nPokey will write the messages, set timing, render, and send the MP4."
      }
    ],
    "body": "WhatsApp Video Skill\n\nCreate animated WhatsApp-style chat videos using Remotion. Perfect for X, TikTok, Instagram Reels.\n\nFeatures\n📱 Realistic iPhone frame with Dynamic Island\n💬 WhatsApp dark mode UI (accurate colors, bubbles, timestamps)\n📜 Auto-scrolling as messages extend\n🔤 Large, readable fonts (optimized for mobile viewing)\n🎵 Message notification sounds\n✨ Spring animations on message appearance\n⌨️ Typing indicator (\"...\" bubbles)\n🔗 Link preview cards\n✅ Read receipts (blue checkmarks)\nBold and code formatting support\nDefault Settings\nAspect ratio: 4:5 (1080×1350) - optimal for X/Instagram feed\nNo intro/outro - starts and ends with the chat\n2x fonts - readable on mobile devices\nAuto-scroll - keeps all messages visible\nPrerequisites\n\nThis skill requires the Remotion Best Practices skill:\n\nnpx skills add remotion-dev/skills -a claude-code -y -g\n\nQuick Start\ncd ~/Projects/remotion-test\n\n\nEdit the conversation in src/WhatsAppVideo.tsx, then render:\n\nnpx remotion render WhatsAppDemo out/my-video.mp4 --concurrency=4\n\nHow to Create a New Video\n1. Define Your Messages\n\nEdit the ChatMessages component in src/WhatsAppVideo.tsx:\n\n// Incoming message (from assistant)\n<Message\n  text=\"Your message text here\"\n  isOutgoing={false}\n  time=\"8:40 AM\"\n  delay={125}  // Frame when message appears (30fps)\n/>\n\n// Outgoing message (from user)\n<Message\n  text=\"Your outgoing message\"\n  isOutgoing={true}\n  time=\"8:41 AM\"\n  delay={200}\n  showCheck={true}\n/>\n\n// Typing indicator (shows \"...\" bubbles)\n<TypingIndicator delay={80} duration={45} />\n\n2. Timing Guide\n30 fps = 30 frames per second\ndelay={30} = appears at 1 second\ndelay={60} = appears at 2 seconds\nduration={45} = lasts 1.5 seconds\n\nTypical flow:\n\nFirst message: delay={20} (~0.7s)\nTyping indicator: delay={80}, duration={45}\nResponse: delay={125} (after typing ends)\nNext typing: delay={175}, duration={45}\nNext response: delay={220}\n3. Adjust Scrolling\n\nIn ChatMessages, update the scroll interpolation based on your message count:\n\nconst scrollAmount = interpolate(\n  frame,\n  [scrollStart, scrollStart + 60, messageFrame, lastFrame],\n  [0, firstScroll, firstScroll, finalScroll],\n  { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" }\n);\n\n\nIncrease scroll values if messages overflow.\n\n4. Text Formatting\n\nMessages support:\n\nBold: **bold text**\nCode: backticks around text\nLine breaks: \\n in the string\nEmojis: just use them directly 🎬\n5. Customizing the Header\n\nIn ChatHeader component, change:\n\nName: Pokey 🐡 → your assistant name\nStatus: online\nAvatar emoji\n6. Update Duration\n\nIn Root.tsx, set durationInFrames to match your video length:\n\nCount frames until last message appears + ~100 frames buffer\nAt 30fps: 450 frames = 15 seconds\n7. Render\n# Standard render\nnpx remotion render WhatsAppDemo out/video.mp4 --concurrency=4\n\n# Higher quality\nnpx remotion render WhatsAppDemo out/video.mp4 --codec h264 --crf 18\n\n# Preview in browser\nnpm run dev\n\nPlatform Dimensions\n\nEdit Root.tsx to change dimensions:\n\nPlatform\tDimensions\tAspect Ratio\tUse Case\nX/Instagram feed\t1080×1350\t4:5\tDefault, most visible\nX/TikTok/Reels\t1080×1920\t9:16\tFull vertical\nX square\t1080×1080\t1:1\tUniversal\nYouTube/X landscape\t1920×1080\t16:9\tHorizontal\nProject Structure\n~/Projects/remotion-test/\n├── src/\n│   ├── WhatsAppVideo.tsx   # Main video component\n│   └── Root.tsx            # Composition config\n├── public/\n│   └── sounds/\n│       ├── pop.mp3         # Message received\n│       └── send.mp3        # Message sent\n└── out/                    # Rendered videos\n\nSound Effects\n\nSounds are triggered with Sequence:\n\n<Sequence from={125}>\n  <Audio src={staticFile(\"sounds/pop.mp3\")} volume={0.5} />\n</Sequence>\n\nTips\nPreview while editing: Run npm run dev to see changes live\nFrame-by-frame: Use timeline scrubber to check timing\nKeep messages concise: Long messages may need scroll adjustment\nTest on mobile: Check readability at actual size\nAsking Pokey to Generate\n\nJust describe the conversation:\n\n\"WhatsApp video: me asking you to [X]\"\n\"Make a chat video showing [conversation]\"\n\nPokey will write the messages, set timing, render, and send the MP4."
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/danpeg/whatsapp-video-mockup",
    "publisherUrl": "https://clawhub.ai/danpeg/whatsapp-video-mockup",
    "owner": "danpeg",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "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"
  }
}