OpenClaw

video-generator

AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional videos, product demos, social media videos, animated explainers, or any programmatic video content. Produces polished motion graphics, not slideshows.

diederik240 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install diederik24/skill-5

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

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"

Retur...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/diederik24/skill-5
Version: —
Commit: 3d6bc2b94a4ccb3cb8e9ab0b6b9488c0509d744d
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# Video Generator (Remotion)

Create professional motion graphics videos programmatically with React and Remotion.

## Default Workflow (ALWAYS follow this)

1. **Scrape brand data** (if featuring a product) using Firecrawl
2. **Create the project** in `output/<project-name>/`
3. **Build all scenes** with proper motion graphics
4. **Install dependencies** with `npm install`
5. **Fix package.json scripts** to use `npx remotion` (not `bun`):
   ```json
   "scripts": {
     "dev": "npx remotion studio",
     "build": "npx remotion bundle"
   }
   ```
5. **Start Remotion Studio** as a background process:
   ```bash
   cd output/<project-name> && npm run dev
   ```
   Wait for "Server ready" on port 3000.
6. **Expose via Cloudflare tunnel** so user can access it:
   ```bash
   bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000
   ```
7. **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):
```bash
cd output/<project-name>
npx remotion render CompositionName out/video.mp4
```

## Quick Start

```bash
# 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
bash scripts/firecrawl.sh "https://example.com"
```

Retur...

搜索