Tencent SkillHub · AI

Video Generator

AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional...

skill openclawclawhub Free

0 Downloads

0 Stars

0 Installs

0 Score

High Signal

AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional...

⬇ 0 downloads ★ 0 stars Unverified but indexed

Install for OpenClaw

Quick setup

Download the package from Yavira.
Extract the archive and review SKILL.md first.
Import or place the package into your OpenClaw setup.

Requirements

Target platform: OpenClaw
Install method: Manual import
Extraction: Extract archive
Prerequisites: OpenClaw
Primary doc: SKILL.md

Package facts

Download mode: Yavira redirect
Package format: ZIP package
Source platform: Tencent SkillHub
What's included: SKILL.md

Validation

Use the Yavira download entry.
Review SKILL.md after the package is downloaded.
Confirm the extracted package contains the expected setup assets.

Install with your agent

Agent handoff

Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.

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.

New install

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.

Upgrade existing

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.

Open Send to Agent page Open JSON manifest Open Markdown brief

Trust & source

Release facts

Source: Tencent SkillHub
Verification: Indexed source record
Version: 0.1.0

Provenance

Publisher: diederik24
Source page: View original listing
Canonical URL: Open canonical page

Documentation

ClawHub primary doc Primary doc: SKILL.md 24 sections Open source page

Video Generator (Remotion)

Create professional motion graphics videos programmatically with React and Remotion.

Default Workflow (ALWAYS follow this)

Scrape brand data (if featuring a product) using Firecrawl Create the project in output/<project-name>/ Build all scenes with proper motion graphics Install dependencies with npm install Fix package.json scripts to use npx remotion (not bun): "scripts": { "dev": "npx remotion studio", "build": "npx remotion bundle" } Start Remotion Studio as a background process: cd output/<project-name> && npm run dev Wait for "Server ready" on port 3000. Expose via Cloudflare tunnel so user can access it: bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000 Send the user the public URL (e.g. https://xxx.trycloudflare.com) The user will preview in their browser, request changes, and you edit the source files. Remotion hot-reloads automatically.

Rendering (only when user explicitly asks to export):

cd output/<project-name> npx remotion render CompositionName out/video.mp4

Quick Start

# Scaffold project cd output && npx --yes create-video@latest my-video --template blank cd my-video && npm install # Add motion libraries npm install lucide-react # Fix scripts in package.json (replace any "bun" references with "npx remotion") # Start dev server npm run dev # Expose publicly bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000

Fetching Brand Data with Firecrawl

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. API Key: Set FIRECRAWL_API_KEY in .env (see TOOLS.md).

Usage

bash scripts/firecrawl.sh "https://example.com" Returns structured brand data: brandName, tagline, headline, description, features, logoUrl, faviconUrl, primaryColors, ctaText, socialLinks, plus screenshot URL and OG image URL.

Download Assets After Scraping

mkdir -p public/images/brand curl -s "https://example.com/favicon.svg" -o public/images/brand/logo.svg curl -s "${OG_IMAGE_URL}" -o public/images/brand/og-image.png curl -sL "${SCREENSHOT_URL}" -o public/images/brand/screenshot.png

Scene Management

Use scene-based architecture with proper transitions: const SCENE_DURATIONS: Record<string, number> = { intro: 3000, // 3s hook problem: 4000, // 4s dramatic solution: 3500, // 3.5s reveal features: 5000, // 5s showcase cta: 3000, // 3s close };

Video Structure Pattern

import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig, interpolate, spring, Img, staticFile, Audio, } from "remotion"; export const MyVideo = () => { const frame = useCurrentFrame(); const { fps, durationInFrames } = useVideoConfig(); return ( <AbsoluteFill> {/* Background music */} <Audio src={staticFile("audio/bg-music.mp3")} volume={0.35} /> {/* Persistent background layer - OUTSIDE sequences */} <AnimatedBackground frame={frame} /> {/* Scene sequences */} <Sequence from={0} durationInFrames={90}> <IntroScene /> </Sequence> <Sequence from={90} durationInFrames={120}> <FeatureScene /> </Sequence> </AbsoluteFill> ); };

AVOID (Slideshow patterns)

Fading to black between scenes Centered text on solid backgrounds Same transition for everything Linear/robotic animations Static screens slideLeft, slideRight, crossDissolve, fadeBlur presets Emoji icons — NEVER use emoji, always use Lucide React icons

PURSUE (Motion graphics)

Overlapping transitions (next starts BEFORE current ends) Layered compositions (background/midground/foreground) Spring physics for organic motion Varied timing (2-5s scenes, mixed rhythms) Continuous visual elements across scenes Custom transitions with clipPath, 3D transforms, morphs Lucide React for ALL icons (npm install lucide-react) — never emoji

Transition Techniques

Morph/Scale - Element scales up to fill screen, becomes next scene's background Wipe - Colored shape sweeps across, revealing next scene Zoom-through - Camera pushes into element, emerges into new scene Clip-path reveal - Circle/polygon grows from point to reveal Persistent anchor - One element stays while surroundings change Directional flow - Scene 1 exits right, Scene 2 enters from right Split/unfold - Screen divides, panels slide apart Perspective flip - Scene rotates on Y-axis in 3D

Animation Timing Reference

// Timing values (in seconds) const timing = { micro: 0.1-0.2, // Small shifts, subtle feedback snappy: 0.2-0.4, // Element entrances, position changes standard: 0.5-0.8, // Scene transitions, major reveals dramatic: 1.0-1.5, // Hero moments, cinematic reveals }; // Spring configs const springs = { snappy: { stiffness: 400, damping: 30 }, bouncy: { stiffness: 300, damping: 15 }, smooth: { stiffness: 120, damping: 25 }, };

Typography

One display font + one body font max Massive headlines, tight tracking Mix weights for hierarchy Keep text SHORT (viewers can't pause)

Colors

Use brand colors from Firecrawl scrape as the primary palette — match the product's actual look Avoid purple/indigo gradients unless the brand uses them or the user explicitly requests them Simple, clean backgrounds are generally best — a single dark tone or subtle gradient beats layered textures Intentional accent colors pulled from the brand

Layout

Use asymmetric layouts, off-center type Edge-aligned elements create visual tension Generous whitespace as design element Use depth sparingly — a subtle backdrop blur or single gradient, not stacked textures

Interpolation

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }); const scale = spring({ frame, fps, from: 0.8, to: 1, durationInFrames: 30, config: { damping: 12 } });

Sequences with Overlap

Cross-Scene Continuity

Place persistent elements OUTSIDE Sequence blocks: const PersistentShape = ({ currentScene }: { currentScene: number }) => { const positions = { 0: { x: 100, y: 100, scale: 1, opacity: 0.3 }, 1: { x: 800, y: 200, scale: 2, opacity: 0.5 }, 2: { x: 400, y: 600, scale: 0.5, opacity: 1 }, }; return ( <motion.div animate={positions[currentScene]} transition={{ duration: 0.8, ease: "easeInOut" }} className="absolute w-32 h-32 rounded-full bg-gradient-to-r from-coral to-orange" /> ); };

Quality Tests

Before delivering, verify: Mute test: Story follows visually without sound? Squint test: Hierarchy visible when squinting? Timing test: Motion feels natural, not robotic? Consistency test: Similar elements behave similarly? Slideshow test: Does NOT look like PowerPoint? Loop test: Video loops smoothly back to start?

Implementation Steps

Firecrawl brand scrape — If featuring a product, scrape its site first Director's treatment — Write vibe, camera style, emotional arc Visual direction — Colors, fonts, brand feel, animation style Scene breakdown — List every scene with description, duration, text, transitions Plan assets — User assets + generated images/videos + brand scrape assets Define durations — Vary pacing (2-3s punchy, 4-5s dramatic) Build persistent layer — Animated background outside scenes Build scenes — Each with enter/exit animations, 3-5 timed moments Open with hook — High-impact first scene Develop narrative — Content-driven middle scenes Strong ending — Intentional, resolved close Start Remotion Studio — npm run dev on port 3000 Expose via tunnel — bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000 Send user the public URL — They preview and request changes live Iterate — Edit source, hot-reload, repeat Render — Only when user says to export final video

File Structure

my-video/ ├── src/ │ ├── Root.tsx # Composition definitions │ ├── index.ts # Entry point │ ├── index.css # Global styles │ ├── MyVideo.tsx # Main video component │ └── scenes/ # Scene components (optional) ├── public/ │ ├── images/ │ │ └── brand/ # Firecrawl-scraped assets │ └── audio/ # Background music ├── remotion.config.ts └── package.json

Common Components

See references/components.md for reusable: Animated backgrounds Terminal windows Feature cards Stats displays CTA buttons Text reveal animations

Tunnel Management

# Start tunnel (exposes port 3000 publicly) bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000 # Check status bash skills/cloudflare-tunnel/scripts/tunnel.sh status 3000 # List all tunnels bash skills/cloudflare-tunnel/scripts/tunnel.sh list # Stop tunnel bash skills/cloudflare-tunnel/scripts/tunnel.sh stop 3000

Category context

Agent frameworks, memory systems, reasoning layers, and model-native orchestration.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package

1 Docs

SKILL.md Primary doc