{
  "schemaVersion": "1.0",
  "item": {
    "slug": "remotion-video-toolkit",
    "name": "Remotion Video Toolkit",
    "source": "tencent",
    "type": "skill",
    "category": "效率提升",
    "sourceUrl": "https://clawhub.ai/shreefentsar/remotion-video-toolkit",
    "canonicalUrl": "https://clawhub.ai/shreefentsar/remotion-video-toolkit",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/remotion-video-toolkit",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=remotion-video-toolkit",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "rules/3d.md",
      "rules/animations.md",
      "rules/assets/charts-bar-chart.tsx",
      "rules/assets/text-animations-typewriter.tsx",
      "rules/assets/text-animations-word-highlight.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",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/remotion-video-toolkit"
    },
    "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/remotion-video-toolkit",
    "agentPageUrl": "https://openagent3.xyz/skills/remotion-video-toolkit/agent",
    "manifestUrl": "https://openagent3.xyz/skills/remotion-video-toolkit/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/remotion-video-toolkit/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": "Remotion Video Toolkit",
        "body": "Write React components, get real MP4 videos. This skill teaches your AI agent how to build with Remotion — from a first animation to a production rendering pipeline.\n\n29 rules. Every major Remotion feature covered."
      },
      {
        "title": "What you can build with this",
        "body": "Personalized video at scale\nFeed user data as JSON props, render a unique video per user. Think Spotify Wrapped, GitHub Unwrapped, onboarding walkthroughs — one template, thousands of outputs.\n\nAutomated social media clips\nPull live data (stats, leaderboards, product metrics) and render daily or weekly video posts without anyone touching a timeline editor.\n\nDynamic ads and marketing videos\nSwap in customer name, product image, pricing. Same template, infinite variations. Render server-side via API or Lambda.\n\nAnimated data visualizations\nTurn dashboards and KPI reports into shareable video clips with animated charts and transitions.\n\nTikTok and Reels captions\nTranscribe audio, display word-by-word highlighted subtitles, export ready for upload.\n\nProduct showcase videos\nAuto-generate from your database — images, specs, pricing — straight to MP4.\n\nEducational and explainer content\nAnimated course materials, certificate videos, step-by-step walkthroughs — all driven by code.\n\nVideo generation as a service\nExpose rendering as an HTTP endpoint. Your app sends JSON, gets back a video file."
      },
      {
        "title": "Requirements",
        "body": "Node.js 18+\nReact 18+ (Remotion renders React components frame-by-frame)\nRemotion — scaffold with npx create-video@latest\nFFmpeg — ships with @remotion/renderer, no separate install needed\nFor serverless rendering: AWS account (Lambda) or GCP account (Cloud Run)"
      },
      {
        "title": "Core",
        "body": "RuleDescriptionCompositionsDefine videos, stills, folders, default props, dynamic metadataRenderingCLI, Node.js API, AWS Lambda, Cloud Run, Express server patternsCalculate metadataSet duration, dimensions, and props dynamically at render time"
      },
      {
        "title": "Animation and timing",
        "body": "RuleDescriptionAnimationsFade, scale, rotate, slideTimingInterpolation curves, easing, spring physicsSequencingDelay, chain, and orchestrate scenesTransitionsScene-to-scene transitionsTrimmingCut the start or end of any animation"
      },
      {
        "title": "Text and typography",
        "body": "RuleDescriptionText animationsTypewriter, word highlight, reveal effectsFontsGoogle Fonts and local font loadingMeasuring textFit text to containers, detect overflow"
      },
      {
        "title": "Media",
        "body": "RuleDescriptionVideosEmbed, trim, speed, volume, loop, pitch shiftAudioImport, trim, fade, volume and speed controlImagesThe Img componentGIFsTimeline-synced GIF playbackAssetsImporting any media into compositionsDecode checkValidate browser compatibility"
      },
      {
        "title": "Captions and subtitles",
        "body": "RuleDescriptionTranscribe captionsAudio to captions via Whisper, Deepgram, or AssemblyAIDisplay captionsTikTok-style word-by-word highlightingImport SRTLoad existing .srt files"
      },
      {
        "title": "Data visualization",
        "body": "RuleDescriptionChartsAnimated bar charts, line graphs, data-driven visuals"
      },
      {
        "title": "Advanced",
        "body": "RuleDescription3D contentThree.js and React Three FiberLottieAfter Effects animations via LottieTailwindCSSStyle compositions with TailwindDOM measurementMeasure element dimensions at render time"
      },
      {
        "title": "Media utilities",
        "body": "RuleDescriptionVideo durationGet length in secondsVideo dimensionsGet width and heightAudio durationGet audio lengthExtract framesPull frames at specific timestamps"
      },
      {
        "title": "Quick start",
        "body": "# Scaffold a project\nnpx create-video@latest my-video\n\n# Preview in browser\ncd my-video && npm start\n\n# Render to MP4\nnpx remotion render src/index.ts MyComposition out/video.mp4\n\n# Pass dynamic data\nnpx remotion render src/index.ts MyComposition out.mp4 --props '{\"title\": \"Hello\"}'"
      },
      {
        "title": "Contribute",
        "body": "Source: github.com/shreefentsar/remotion-video-toolkit\n\nMissing something? Found a better approach? Open a PR — new rules, improved examples, bug fixes all welcome.\n\nBuilt by Zone 99"
      }
    ],
    "body": "Remotion Video Toolkit\n\nWrite React components, get real MP4 videos. This skill teaches your AI agent how to build with Remotion — from a first animation to a production rendering pipeline.\n\n29 rules. Every major Remotion feature covered.\n\nWhat you can build with this\n\nPersonalized video at scale Feed user data as JSON props, render a unique video per user. Think Spotify Wrapped, GitHub Unwrapped, onboarding walkthroughs — one template, thousands of outputs.\n\nAutomated social media clips Pull live data (stats, leaderboards, product metrics) and render daily or weekly video posts without anyone touching a timeline editor.\n\nDynamic ads and marketing videos Swap in customer name, product image, pricing. Same template, infinite variations. Render server-side via API or Lambda.\n\nAnimated data visualizations Turn dashboards and KPI reports into shareable video clips with animated charts and transitions.\n\nTikTok and Reels captions Transcribe audio, display word-by-word highlighted subtitles, export ready for upload.\n\nProduct showcase videos Auto-generate from your database — images, specs, pricing — straight to MP4.\n\nEducational and explainer content Animated course materials, certificate videos, step-by-step walkthroughs — all driven by code.\n\nVideo generation as a service Expose rendering as an HTTP endpoint. Your app sends JSON, gets back a video file.\n\nRequirements\nNode.js 18+\nReact 18+ (Remotion renders React components frame-by-frame)\nRemotion — scaffold with npx create-video@latest\nFFmpeg — ships with @remotion/renderer, no separate install needed\nFor serverless rendering: AWS account (Lambda) or GCP account (Cloud Run)\nWhat's inside\nCore\nRule\tDescription\nCompositions\tDefine videos, stills, folders, default props, dynamic metadata\nRendering\tCLI, Node.js API, AWS Lambda, Cloud Run, Express server patterns\nCalculate metadata\tSet duration, dimensions, and props dynamically at render time\nAnimation and timing\nRule\tDescription\nAnimations\tFade, scale, rotate, slide\nTiming\tInterpolation curves, easing, spring physics\nSequencing\tDelay, chain, and orchestrate scenes\nTransitions\tScene-to-scene transitions\nTrimming\tCut the start or end of any animation\nText and typography\nRule\tDescription\nText animations\tTypewriter, word highlight, reveal effects\nFonts\tGoogle Fonts and local font loading\nMeasuring text\tFit text to containers, detect overflow\nMedia\nRule\tDescription\nVideos\tEmbed, trim, speed, volume, loop, pitch shift\nAudio\tImport, trim, fade, volume and speed control\nImages\tThe Img component\nGIFs\tTimeline-synced GIF playback\nAssets\tImporting any media into compositions\nDecode check\tValidate browser compatibility\nCaptions and subtitles\nRule\tDescription\nTranscribe captions\tAudio to captions via Whisper, Deepgram, or AssemblyAI\nDisplay captions\tTikTok-style word-by-word highlighting\nImport SRT\tLoad existing .srt files\nData visualization\nRule\tDescription\nCharts\tAnimated bar charts, line graphs, data-driven visuals\nAdvanced\nRule\tDescription\n3D content\tThree.js and React Three Fiber\nLottie\tAfter Effects animations via Lottie\nTailwindCSS\tStyle compositions with Tailwind\nDOM measurement\tMeasure element dimensions at render time\nMedia utilities\nRule\tDescription\nVideo duration\tGet length in seconds\nVideo dimensions\tGet width and height\nAudio duration\tGet audio length\nExtract frames\tPull frames at specific timestamps\nQuick start\n# Scaffold a project\nnpx create-video@latest my-video\n\n# Preview in browser\ncd my-video && npm start\n\n# Render to MP4\nnpx remotion render src/index.ts MyComposition out/video.mp4\n\n# Pass dynamic data\nnpx remotion render src/index.ts MyComposition out.mp4 --props '{\"title\": \"Hello\"}'\n\nContribute\n\nSource: github.com/shreefentsar/remotion-video-toolkit\n\nMissing something? Found a better approach? Open a PR — new rules, improved examples, bug fixes all welcome.\n\nBuilt by Zone 99"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/shreefentsar/remotion-video-toolkit",
    "publisherUrl": "https://clawhub.ai/shreefentsar/remotion-video-toolkit",
    "owner": "shreefentsar",
    "version": "1.4.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/remotion-video-toolkit",
    "downloadUrl": "https://openagent3.xyz/downloads/remotion-video-toolkit",
    "agentUrl": "https://openagent3.xyz/skills/remotion-video-toolkit/agent",
    "manifestUrl": "https://openagent3.xyz/skills/remotion-video-toolkit/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/remotion-video-toolkit/agent.md"
  }
}