{ "schemaVersion": "1.0", "item": { "slug": "skill-5", "name": "Video Generator", "source": "tencent", "type": "skill", "category": "AI 智能", "sourceUrl": "https://clawhub.ai/diederik24/skill-5", "canonicalUrl": "https://clawhub.ai/diederik24/skill-5", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/skill-5", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=skill-5", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md" ], "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/skill-5" }, "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/skill-5", "agentPageUrl": "https://openagent3.xyz/skills/skill-5/agent", "manifestUrl": "https://openagent3.xyz/skills/skill-5/agent.json", "briefUrl": "https://openagent3.xyz/skills/skill-5/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": "Video Generator (Remotion)", "body": "Create professional motion graphics videos programmatically with React and Remotion." }, { "title": "Default Workflow (ALWAYS follow this)", "body": "Scrape brand data (if featuring a product) using Firecrawl\nCreate the project in output//\nBuild all scenes with proper motion graphics\nInstall dependencies with npm install\nFix package.json scripts to use npx remotion (not bun):\n\"scripts\": {\n \"dev\": \"npx remotion studio\",\n \"build\": \"npx remotion bundle\"\n}\n\n\nStart Remotion Studio as a background process:\ncd output/ && npm run dev\n\nWait for \"Server ready\" on port 3000.\nExpose via Cloudflare tunnel so user can access it:\nbash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000\n\n\nSend the user the public URL (e.g. https://xxx.trycloudflare.com)\n\nThe user will preview in their browser, request changes, and you edit the source files. Remotion hot-reloads automatically." }, { "title": "Rendering (only when user explicitly asks to export):", "body": "cd output/\nnpx remotion render CompositionName out/video.mp4" }, { "title": "Quick Start", "body": "# Scaffold project\ncd output && npx --yes create-video@latest my-video --template blank\ncd my-video && npm install\n\n# Add motion libraries\nnpm install lucide-react\n\n# Fix scripts in package.json (replace any \"bun\" references with \"npx remotion\")\n\n# Start dev server\nnpm run dev\n\n# Expose publicly\nbash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000" }, { "title": "Fetching Brand Data with Firecrawl", "body": "MANDATORY: When a video mentions or features any product/company, use Firecrawl to scrape the product's website for brand data, colors, screenshots, and copy BEFORE designing the video. This ensures visual accuracy and brand consistency.\n\nAPI Key: Set FIRECRAWL_API_KEY in .env (see TOOLS.md)." }, { "title": "Usage", "body": "bash scripts/firecrawl.sh \"https://example.com\"\n\nReturns structured brand data: brandName, tagline, headline, description, features, logoUrl, faviconUrl, primaryColors, ctaText, socialLinks, plus screenshot URL and OG image URL." }, { "title": "Download Assets After Scraping", "body": "mkdir -p public/images/brand\ncurl -s \"https://example.com/favicon.svg\" -o public/images/brand/logo.svg\ncurl -s \"${OG_IMAGE_URL}\" -o public/images/brand/og-image.png\ncurl -sL \"${SCREENSHOT_URL}\" -o public/images/brand/screenshot.png" }, { "title": "Scene Management", "body": "Use scene-based architecture with proper transitions:\n\nconst SCENE_DURATIONS: Record = {\n intro: 3000, // 3s hook\n problem: 4000, // 4s dramatic\n solution: 3500, // 3.5s reveal\n features: 5000, // 5s showcase\n cta: 3000, // 3s close\n};" }, { "title": "Video Structure Pattern", "body": "import {\n AbsoluteFill, Sequence, useCurrentFrame,\n useVideoConfig, interpolate, spring,\n Img, staticFile, Audio,\n} from \"remotion\";\n\nexport const MyVideo = () => {\n const frame = useCurrentFrame();\n const { fps, durationInFrames } = useVideoConfig();\n\n return (\n \n {/* Background music */}\n \n );\n};" }, { "title": "AVOID (Slideshow patterns)", "body": "Fading to black between scenes\nCentered text on solid backgrounds\nSame transition for everything\nLinear/robotic animations\nStatic screens\nslideLeft, slideRight, crossDissolve, fadeBlur presets\nEmoji icons — NEVER use emoji, always use Lucide React icons" }, { "title": "PURSUE (Motion graphics)", "body": "Overlapping transitions (next starts BEFORE current ends)\nLayered compositions (background/midground/foreground)\nSpring physics for organic motion\nVaried timing (2-5s scenes, mixed rhythms)\nContinuous visual elements across scenes\nCustom transitions with clipPath, 3D transforms, morphs\nLucide React for ALL icons (npm install lucide-react) — never emoji" }, { "title": "Transition Techniques", "body": "Morph/Scale - Element scales up to fill screen, becomes next scene's background\nWipe - Colored shape sweeps across, revealing next scene\nZoom-through - Camera pushes into element, emerges into new scene\nClip-path reveal - Circle/polygon grows from point to reveal\nPersistent anchor - One element stays while surroundings change\nDirectional flow - Scene 1 exits right, Scene 2 enters from right\nSplit/unfold - Screen divides, panels slide apart\nPerspective flip - Scene rotates on Y-axis in 3D" }, { "title": "Animation Timing Reference", "body": "// Timing values (in seconds)\nconst timing = {\n micro: 0.1-0.2, // Small shifts, subtle feedback\n snappy: 0.2-0.4, // Element entrances, position changes\n standard: 0.5-0.8, // Scene transitions, major reveals\n dramatic: 1.0-1.5, // Hero moments, cinematic reveals\n};\n\n// Spring configs\nconst springs = {\n snappy: { stiffness: 400, damping: 30 },\n bouncy: { stiffness: 300, damping: 15 },\n smooth: { stiffness: 120, damping: 25 },\n};" }, { "title": "Typography", "body": "One display font + one body font max\nMassive headlines, tight tracking\nMix weights for hierarchy\nKeep text SHORT (viewers can't pause)" }, { "title": "Colors", "body": "Use brand colors from Firecrawl scrape as the primary palette — match the product's actual look\nAvoid purple/indigo gradients unless the brand uses them or the user explicitly requests them\nSimple, clean backgrounds are generally best — a single dark tone or subtle gradient beats layered textures\nIntentional accent colors pulled from the brand" }, { "title": "Layout", "body": "Use asymmetric layouts, off-center type\nEdge-aligned elements create visual tension\nGenerous whitespace as design element\nUse depth sparingly — a subtle backdrop blur or single gradient, not stacked textures" }, { "title": "Interpolation", "body": "const opacity = interpolate(frame, [0, 30], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\"\n});\n\nconst scale = spring({\n frame, fps,\n from: 0.8, to: 1,\n durationInFrames: 30,\n config: { damping: 12 }\n});" }, { "title": "Sequences with Overlap", "body": "\n \n\n\n \n" }, { "title": "Cross-Scene Continuity", "body": "Place persistent elements OUTSIDE Sequence blocks:\n\nconst PersistentShape = ({ currentScene }: { currentScene: number }) => {\n const positions = {\n 0: { x: 100, y: 100, scale: 1, opacity: 0.3 },\n 1: { x: 800, y: 200, scale: 2, opacity: 0.5 },\n 2: { x: 400, y: 600, scale: 0.5, opacity: 1 },\n };\n\n return (\n \n );\n};" }, { "title": "Quality Tests", "body": "Before delivering, verify:\n\nMute test: Story follows visually without sound?\nSquint test: Hierarchy visible when squinting?\nTiming test: Motion feels natural, not robotic?\nConsistency test: Similar elements behave similarly?\nSlideshow test: Does NOT look like PowerPoint?\nLoop test: Video loops smoothly back to start?" }, { "title": "Implementation Steps", "body": "Firecrawl brand scrape — If featuring a product, scrape its site first\nDirector's treatment — Write vibe, camera style, emotional arc\nVisual direction — Colors, fonts, brand feel, animation style\nScene breakdown — List every scene with description, duration, text, transitions\nPlan assets — User assets + generated images/videos + brand scrape assets\nDefine durations — Vary pacing (2-3s punchy, 4-5s dramatic)\nBuild persistent layer — Animated background outside scenes\nBuild scenes — Each with enter/exit animations, 3-5 timed moments\nOpen with hook — High-impact first scene\nDevelop narrative — Content-driven middle scenes\nStrong ending — Intentional, resolved close\nStart Remotion Studio — npm run dev on port 3000\nExpose via tunnel — bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000\nSend user the public URL — They preview and request changes live\nIterate — Edit source, hot-reload, repeat\nRender — Only when user says to export final video" }, { "title": "File Structure", "body": "my-video/\n├── src/\n│ ├── Root.tsx # Composition definitions\n│ ├── index.ts # Entry point\n│ ├── index.css # Global styles\n│ ├── MyVideo.tsx # Main video component\n│ └── scenes/ # Scene components (optional)\n├── public/\n│ ├── images/\n│ │ └── brand/ # Firecrawl-scraped assets\n│ └── audio/ # Background music\n├── remotion.config.ts\n└── package.json" }, { "title": "Common Components", "body": "See references/components.md for reusable:\n\nAnimated backgrounds\nTerminal windows\nFeature cards\nStats displays\nCTA buttons\nText reveal animations" }, { "title": "Tunnel Management", "body": "# Start tunnel (exposes port 3000 publicly)\nbash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000\n\n# Check status\nbash skills/cloudflare-tunnel/scripts/tunnel.sh status 3000\n\n# List all tunnels\nbash skills/cloudflare-tunnel/scripts/tunnel.sh list\n\n# Stop tunnel\nbash skills/cloudflare-tunnel/scripts/tunnel.sh stop 3000" } ], "body": "Video Generator (Remotion)\n\nCreate professional motion graphics videos programmatically with React and Remotion.\n\nDefault Workflow (ALWAYS follow this)\nScrape brand data (if featuring a product) using Firecrawl\nCreate the project in output//\nBuild all scenes with proper motion graphics\nInstall dependencies with npm install\nFix package.json scripts to use npx remotion (not bun):\n\"scripts\": {\n \"dev\": \"npx remotion studio\",\n \"build\": \"npx remotion bundle\"\n}\n\nStart Remotion Studio as a background process:\ncd output/ && npm run dev\n\nWait for \"Server ready\" on port 3000.\nExpose via Cloudflare tunnel so user can access it:\nbash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000\n\nSend the user the public URL (e.g. https://xxx.trycloudflare.com)\n\nThe user will preview in their browser, request changes, and you edit the source files. Remotion hot-reloads automatically.\n\nRendering (only when user explicitly asks to export):\ncd output/\nnpx remotion render CompositionName out/video.mp4\n\nQuick Start\n# Scaffold project\ncd output && npx --yes create-video@latest my-video --template blank\ncd my-video && npm install\n\n# Add motion libraries\nnpm install lucide-react\n\n# Fix scripts in package.json (replace any \"bun\" references with \"npx remotion\")\n\n# Start dev server\nnpm run dev\n\n# Expose publicly\nbash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000\n\nFetching Brand Data with Firecrawl\n\nMANDATORY: When a video mentions or features any product/company, use Firecrawl to scrape the product's website for brand data, colors, screenshots, and copy BEFORE designing the video. This ensures visual accuracy and brand consistency.\n\nAPI Key: Set FIRECRAWL_API_KEY in .env (see TOOLS.md).\n\nUsage\nbash scripts/firecrawl.sh \"https://example.com\"\n\n\nReturns structured brand data: brandName, tagline, headline, description, features, logoUrl, faviconUrl, primaryColors, ctaText, socialLinks, plus screenshot URL and OG image URL.\n\nDownload Assets After Scraping\nmkdir -p public/images/brand\ncurl -s \"https://example.com/favicon.svg\" -o public/images/brand/logo.svg\ncurl -s \"${OG_IMAGE_URL}\" -o public/images/brand/og-image.png\ncurl -sL \"${SCREENSHOT_URL}\" -o public/images/brand/screenshot.png\n\nCore Architecture\nScene Management\n\nUse scene-based architecture with proper transitions:\n\nconst SCENE_DURATIONS: Record = {\n intro: 3000, // 3s hook\n problem: 4000, // 4s dramatic\n solution: 3500, // 3.5s reveal\n features: 5000, // 5s showcase\n cta: 3000, // 3s close\n};\n\nVideo Structure Pattern\nimport {\n AbsoluteFill, Sequence, useCurrentFrame,\n useVideoConfig, interpolate, spring,\n Img, staticFile, Audio,\n} from \"remotion\";\n\nexport const MyVideo = () => {\n const frame = useCurrentFrame();\n const { fps, durationInFrames } = useVideoConfig();\n\n return (\n \n {/* Background music */}\n \n );\n};\n\nMotion Graphics Principles\nAVOID (Slideshow patterns)\nFading to black between scenes\nCentered text on solid backgrounds\nSame transition for everything\nLinear/robotic animations\nStatic screens\nslideLeft, slideRight, crossDissolve, fadeBlur presets\nEmoji icons — NEVER use emoji, always use Lucide React icons\nPURSUE (Motion graphics)\nOverlapping transitions (next starts BEFORE current ends)\nLayered compositions (background/midground/foreground)\nSpring physics for organic motion\nVaried timing (2-5s scenes, mixed rhythms)\nContinuous visual elements across scenes\nCustom transitions with clipPath, 3D transforms, morphs\nLucide React for ALL icons (npm install lucide-react) — never emoji\nTransition Techniques\nMorph/Scale - Element scales up to fill screen, becomes next scene's background\nWipe - Colored shape sweeps across, revealing next scene\nZoom-through - Camera pushes into element, emerges into new scene\nClip-path reveal - Circle/polygon grows from point to reveal\nPersistent anchor - One element stays while surroundings change\nDirectional flow - Scene 1 exits right, Scene 2 enters from right\nSplit/unfold - Screen divides, panels slide apart\nPerspective flip - Scene rotates on Y-axis in 3D\nAnimation Timing Reference\n// Timing values (in seconds)\nconst timing = {\n micro: 0.1-0.2, // Small shifts, subtle feedback\n snappy: 0.2-0.4, // Element entrances, position changes\n standard: 0.5-0.8, // Scene transitions, major reveals\n dramatic: 1.0-1.5, // Hero moments, cinematic reveals\n};\n\n// Spring configs\nconst springs = {\n snappy: { stiffness: 400, damping: 30 },\n bouncy: { stiffness: 300, damping: 15 },\n smooth: { stiffness: 120, damping: 25 },\n};\n\nVisual Style Guidelines\nTypography\nOne display font + one body font max\nMassive headlines, tight tracking\nMix weights for hierarchy\nKeep text SHORT (viewers can't pause)\nColors\nUse brand colors from Firecrawl scrape as the primary palette — match the product's actual look\nAvoid purple/indigo gradients unless the brand uses them or the user explicitly requests them\nSimple, clean backgrounds are generally best — a single dark tone or subtle gradient beats layered textures\nIntentional accent colors pulled from the brand\nLayout\nUse asymmetric layouts, off-center type\nEdge-aligned elements create visual tension\nGenerous whitespace as design element\nUse depth sparingly — a subtle backdrop blur or single gradient, not stacked textures\nRemotion Essentials\nInterpolation\nconst opacity = interpolate(frame, [0, 30], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\"\n});\n\nconst scale = spring({\n frame, fps,\n from: 0.8, to: 1,\n durationInFrames: 30,\n config: { damping: 12 }\n});\n\nSequences with Overlap\n\n \n\n\n \n\n\nCross-Scene Continuity\n\nPlace persistent elements OUTSIDE Sequence blocks:\n\nconst PersistentShape = ({ currentScene }: { currentScene: number }) => {\n const positions = {\n 0: { x: 100, y: 100, scale: 1, opacity: 0.3 },\n 1: { x: 800, y: 200, scale: 2, opacity: 0.5 },\n 2: { x: 400, y: 600, scale: 0.5, opacity: 1 },\n };\n\n return (\n \n );\n};\n\nQuality Tests\n\nBefore delivering, verify:\n\nMute test: Story follows visually without sound?\nSquint test: Hierarchy visible when squinting?\nTiming test: Motion feels natural, not robotic?\nConsistency test: Similar elements behave similarly?\nSlideshow test: Does NOT look like PowerPoint?\nLoop test: Video loops smoothly back to start?\nImplementation Steps\nFirecrawl brand scrape — If featuring a product, scrape its site first\nDirector's treatment — Write vibe, camera style, emotional arc\nVisual direction — Colors, fonts, brand feel, animation style\nScene breakdown — List every scene with description, duration, text, transitions\nPlan assets — User assets + generated images/videos + brand scrape assets\nDefine durations — Vary pacing (2-3s punchy, 4-5s dramatic)\nBuild persistent layer — Animated background outside scenes\nBuild scenes — Each with enter/exit animations, 3-5 timed moments\nOpen with hook — High-impact first scene\nDevelop narrative — Content-driven middle scenes\nStrong ending — Intentional, resolved close\nStart Remotion Studio — npm run dev on port 3000\nExpose via tunnel — bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000\nSend user the public URL — They preview and request changes live\nIterate — Edit source, hot-reload, repeat\nRender — Only when user says to export final video\nFile Structure\nmy-video/\n├── src/\n│ ├── Root.tsx # Composition definitions\n│ ├── index.ts # Entry point\n│ ├── index.css # Global styles\n│ ├── MyVideo.tsx # Main video component\n│ └── scenes/ # Scene components (optional)\n├── public/\n│ ├── images/\n│ │ └── brand/ # Firecrawl-scraped assets\n│ └── audio/ # Background music\n├── remotion.config.ts\n└── package.json\n\nCommon Components\n\nSee references/components.md for reusable:\n\nAnimated backgrounds\nTerminal windows\nFeature cards\nStats displays\nCTA buttons\nText reveal animations\nTunnel Management\n# Start tunnel (exposes port 3000 publicly)\nbash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000\n\n# Check status\nbash skills/cloudflare-tunnel/scripts/tunnel.sh status 3000\n\n# List all tunnels\nbash skills/cloudflare-tunnel/scripts/tunnel.sh list\n\n# Stop tunnel\nbash skills/cloudflare-tunnel/scripts/tunnel.sh stop 3000" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/diederik24/skill-5", "publisherUrl": "https://clawhub.ai/diederik24/skill-5", "owner": "diederik24", "version": "0.1.0", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/skill-5", "downloadUrl": "https://openagent3.xyz/downloads/skill-5", "agentUrl": "https://openagent3.xyz/skills/skill-5/agent", "manifestUrl": "https://openagent3.xyz/skills/skill-5/agent.json", "briefUrl": "https://openagent3.xyz/skills/skill-5/agent.md" } }