⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

Remotion 渲染配置生成器 - 一键生成视频输出、编解码器、质量参数设置

remotion-render-config by ncklrs/startup-os-skills

70 周安装量

14 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/ncklrs/startup-os-skills --skill remotion-render-config

自动化媒体制作代码生成

🇨🇳中文介绍

Remotion 渲染配置

生成渲染配置文档，用于定义 Remotion 视频渲染的视频输出设置、编解码器参数、格式选项和质量设置。此技能专门关注渲染/导出配置。

此技能的功能

为以下内容生成渲染配置：

输出格式 — MP4、WebM、ProRes 等。
编解码器设置 — H.264、H.265、VP9 参数
质量设置 — CRF、比特率、压缩级别
分辨率 — 输出尺寸和缩放
平台优化 — YouTube、Twitter、Instagram 预设

范围边界

范围内：

渲染命令配置
编解码器和格式选择
质量和压缩设置
平台特定优化
输出文件参数

范围外：

合成实现（使用 /remotion-composition）
场景逻辑（使用 /remotion-component-gen）
动画参数（使用 /remotion-animation）
资产管理（使用 /remotion-asset-coordinator）

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

输入格式：目标平台/质量要求

接受渲染目标规格说明：

使用 H.264 编解码器以高质量渲染用于 YouTube

结构化格式：

## 渲染要求

**目标平台：** YouTube
**质量等级：** 高
**格式：** MP4 (H.264)
**分辨率：** 1920x1080
**帧率：** 30 fps
**附加要求：** 准备上传，优化文件大小

输出格式：RENDER_CONFIG.md

生成完整的渲染配置文档：

# 渲染配置：ProductDemo

## 状态
✅ 渲染设置已定义
⏳ 准备进行视频渲染

## 渲染命令

```bash
npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p \
  --audio-codec=aac \
  --audio-bitrate=320k

容器： MP4
视频编解码器： H.264 (x264)
音频编解码器： AAC
像素格式： yuv420p (为了最大兼容性)

CRF： 18 (高质量，约 15-20 MB/分钟)
音频比特率： 320 kbps (高质量)
预设： medium (平衡速度/质量)

输出： 1920x1080 (16:9)
帧率： 30 fps
时长： 30 秒 (900 帧)

针对 YouTube 上传优化：

✅ H.264 编解码器 (广泛支持)
✅ yuv420p 像素格式 (必需)
✅ AAC 音频 (推荐)
✅ CRF 18 (高质量，文件大小适中)
✅ 元数据兼容

预估文件大小： ~45-60 MB

网络交付 (较小文件)

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=23 \
  --audio-bitrate=192k

文件大小：~25-35 MB

最高质量 (存档)

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=15 \
  --audio-bitrate=320k \
  --preset=slower

文件大小：~80-100 MB

npx remotion render \
  src/index.tsx \
  ProductDemo \
  preview.mp4 \
  --crf=28 \
  --preset=ultrafast

文件大小：~15-20 MB

测试渲染 (前 3 秒)：

npx remotion render src/index.tsx ProductDemo test.mp4 --frames=0-90
完整渲染 并显示进度：

npx remotion render src/index.tsx ProductDemo output.mp4 --codec=h264 --crf=18
验证输出：

 * 检查文件大小

 * 在视频播放器中播放
 * 验证音频同步
 * 检查质量

4. 上传到平台 (YouTube 等)

运行测试渲染 以验证时间和质量
调整 CRF 如果文件大小过大/过小
完整渲染 当准备就绪时
上传到目标平台

增加 CRF (网络使用 23-28)
降低音频比特率 (192k 或 128k)

降低 CRF (更高质量使用 15-17)
使用更慢的预设 (slow, slower)

渲染速度慢：

使用更快的预设 (fast, veryfast)
临时降低分辨率进行测试

已选择编解码器
已定义质量设置
已针对平台优化
已生成渲染命令
已完成测试渲染
已完成完整渲染
已验证输出

H.264 (兼容性最佳)

最佳用途：YouTube、网络交付、社交媒体

--codec=h264
--crf=18          # 质量 (数值越低越好，典型范围 15-28)
--pixel-format=yuv420p
--audio-codec=aac
--audio-bitrate=320k

CRF 15-17: 极佳 (大文件)
CRF 18-20: 高 (推荐)
CRF 21-23: 良好 (网络交付)
CRF 24-28: 可接受 (预览/草稿)

H.265 (HEVC) - 更好的压缩

最佳用途：现代平台、更小文件、4K 视频

--codec=h265
--crf=23
--pixel-format=yuv420p10le

注意： 并非普遍支持，但在相同质量下文件大小减少约 50%

最佳用途：WebM 格式、网络交付、Chrome/Firefox

--codec=vp9
--crf=30
--pixel-format=yuv420p

最佳用途：视频编辑、最高质量、无压缩

--codec=prores
--prores-profile=3  # HQ 配置文件

警告： 文件非常大 (~1-2 GB/分钟)

质量与文件大小参考

对于 30 秒 1080p 视频，30fps：

CRF	质量	文件大小	使用场景
15	极佳	80-100 MB	存档、编辑
18	高	45-60 MB	YouTube、高质量
21	良好	30-40 MB	网络、社交媒体
23	可接受	20-30 MB	网络交付
28	预览	10-15 MB	草稿、测试

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p \
  --audio-codec=aac \
  --audio-bitrate=320k

分辨率：1920x1080 或更高
帧率：24、25、30、48、50 或 60 fps
编解码器：H.264 或 H.265
音频：AAC-LC，320 kbps

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

最大时长：2:20 (140 秒)
最大文件大小：512 MB
分辨率：最高 1920x1200 或 1200x1920

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

最大时长：60 秒
分辨率：1080x1080 (1:1) 或 1080x1350 (4:5)
帧率：30 fps
编解码器：H.264

Instagram Reels/Stories

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

分辨率：1080x1920 (9:16)
最大时长：90 秒 (Reels)，15 秒 (Stories)
帧率：30 fps

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

分辨率：1080x1920 (9:16)
最大时长：10 分钟
最大文件大小：287.6 MB
帧率：30 或 60 fps

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

最大文件大小：5 GB
分辨率：256x144 到 4096x2304
帧率：10-60 fps

并发 (更快渲染)

--concurrency=8  # 使用 8 个 CPU 核心

图像序列 (用于后期处理)

--sequence
--image-format=png

输出 PNG 序列用于 After Effects、Premiere 等。

--frames=30-90  # 仅渲染第 30 到 90 帧

--scale=0.5  # 以 50% 分辨率渲染 (960x540)

用于快速预览。

自定义输出名称

npx remotion render src/index.tsx VideoName "output/final-video.mp4"

# 要使用的 CPU 核心数
export REMOTION_CONCURRENCY=8

# 禁用浏览器沙盒 (Docker)
export REMOTION_DISABLE_CHROMIUM_SANDBOX=true

# 设置自定义 Chromium 路径
export REMOTION_CHROMIUM_PATH=/path/to/chromium

创建 remotion.config.ts：

import { Config } from "@remotion/cli/config";

Config.setCodec("h264");
Config.setCrf(18);
Config.setPixelFormat("yuv420p");
Config.setAudioBitrate("320k");
Config.setAudioCodec("aac");
Config.setConcurrency(8);
Config.setOverwriteOutput(true);

然后使用以下命令渲染：

npx remotion render

添加到 package.json：

{
  "scripts": {
    "render:preview": "remotion render src/index.tsx VideoName preview.mp4 --crf=28 --preset=ultrafast",
    "render:draft": "remotion render src/index.tsx VideoName draft.mp4 --crf=23",
    "render:final": "remotion render src/index.tsx VideoName output.mp4 --codec=h264 --crf=18",
    "render:youtube": "remotion render src/index.tsx VideoName youtube.mp4 --codec=h264 --crf=18 --audio-bitrate=320k"
  }
}

npm run render:youtube

使用并发 以利用所有 CPU 核心
关闭其他应用程序 在渲染期间
使用 SSD 以获得更快的文件 I/O
降低合成复杂度 如果渲染太慢
在完整渲染前测试渲染小范围
使用 image-format 属性 如果你需要透明度

质量验证检查清单

文件播放无错误
音频与视频同步
视觉质量符合预期
文件大小对于平台来说合理
没有可见的编码伪影
颜色看起来正确
文本可读
动画流畅

完成合成 通过其他技能
生成渲染配置 使用此技能 → RENDER_CONFIG.md
运行测试渲染 (前几秒)
验证质量和时间
运行完整渲染
上传到目标平台

与其他技能的集成

此技能是流水线中的最后一步：

remotion-render-config (此技能)
    ↓ 输出：RENDER_CONFIG.md
    ↓ 使用时机：所有实现完成后
    ↓ 产生：最终视频文件

与以下技能配合使用：

/remotion-scaffold — 渲染已完成项目的输出
/remotion-composition — 渲染结构化合成
/remotion-component-gen — 渲染已实现的场景
/remotion-spec-translator — 将此作为最后一步进行编排

此技能提供生产就绪的渲染配置，确保针对目标平台优化的高质量视频输出。

🇺🇸English

Remotion Render Config

Generates render configuration documents that define video output settings, codec parameters, format options, and quality settings for Remotion video renders. This skill focuses exclusively on render/export configuration.

What This Skill Does

Generates render configurations for:

Output format — MP4, WebM, ProRes, etc.
Codec settings — H.264, H.265, VP9 parameters
Quality settings — CRF, bitrate, compression level
Resolution — Output dimensions and scaling
Platform optimization — YouTube, Twitter, Instagram presets

Scope Boundaries

IN SCOPE:

Render command configuration
Codec and format selection
Quality and compression settings
Platform-specific optimizations
Output file parameters

OUT OF SCOPE:

Composition implementation (use /remotion-composition)
Scene logic (use /remotion-component-gen)
Animation parameters (use /remotion-animation)
Asset management (use /remotion-asset-coordinator)

Input/Output Formats

Input Format: Target Platform/Quality Requirements

Accepts render target specifications:

Natural Language:

Render for YouTube at high quality with H.264 codec

Structured Format:

## Render Requirements

**Target Platform:** YouTube
**Quality Level:** High
**Format:** MP4 (H.264)
**Resolution:** 1920x1080
**Frame Rate:** 30 fps
**Additional:** Upload-ready, optimized file size

Output Format: RENDER_CONFIG.md

Generates complete render configuration document:

# Render Configuration: ProductDemo

## Status
✅ Render settings defined
⏳ Ready for video render

## Render Command

```bash
npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p \
  --audio-codec=aac \
  --audio-bitrate=320k

Configuration Details

Output Format

Container: MP4
Video Codec: H.264 (x264)
Audio Codec: AAC
Pixel Format: yuv420p (for maximum compatibility)

Quality Settings

CRF: 18 (high quality, ~15-20 MB/min)
Audio Bitrate: 320 kbps (high quality)
Preset: medium (balanced speed/quality)

Resolution

Output: 1920x1080 (16:9)
Frame Rate: 30 fps
Duration: 30 seconds (900 frames)

Platform: YouTube

Optimized for YouTube upload:

✅ H.264 codec (widely supported)
✅ yuv420p pixel format (required)
✅ AAC audio (recommended)
✅ CRF 18 (high quality, good file size)
✅ Metadata compatible

Estimated File Size: ~45-60 MB

Alternative Render Options

Web Delivery (Smaller File)

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=23 \
  --audio-bitrate=192k

File size: ~25-35 MB

Maximum Quality (Archive)

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=15 \
  --audio-bitrate=320k \
  --preset=slower

File size: ~80-100 MB

Fast Preview Render

npx remotion render \
  src/index.tsx \
  ProductDemo \
  preview.mp4 \
  --crf=28 \
  --preset=ultrafast

File size: ~15-20 MB

Render Workflow

Test render (first 3 seconds):

npx remotion render src/index.tsx ProductDemo test.mp4 --frames=0-90

Full render with progress:

npx remotion render src/index.tsx ProductDemo output.mp4 --codec=h264 --crf=18

Verify output :
- Check file size
- Play in video player
- Verify audio sync
- Check quality
Upload to platform (YouTube, etc.)

Next Steps

Run test render to verify timing and quality
Adjust CRF if file size too large/small
Full render when ready
Upload to target platform

Troubleshooting

File too large:

Increase CRF (23-28 for web)
Lower audio bitrate (192k or 128k)

Quality issues:

Decrease CRF (15-17 for higher quality)
Use slower preset (slow, slower)

Rendering slow:

Use faster preset (fast, veryfast)
Reduce resolution temporarily for testing

Checklist

Codec selected
Quality settings defined
Platform optimized
Render command generated
Test render completed
Full render completed

Output verified

Codec Reference

H.264 (Most Compatible)

Best for: YouTube, web delivery, social media

--codec=h264
--crf=18          # Quality (lower = better, 15-28 typical)
--pixel-format=yuv420p
--audio-codec=aac
--audio-bitrate=320k

Quality Levels:

CRF 15-17: Excellent (large files)
CRF 18-20: High (recommended)
CRF 21-23: Good (web delivery)
CRF 24-28: Acceptable (preview/draft)

H.265 (HEVC) - Better Compression

Best for: Modern platforms, smaller files, 4K video

--codec=h265
--crf=23
--pixel-format=yuv420p10le

Note: Not universally supported, but ~50% smaller files at same quality

VP9 (Open Source)

Best for: WebM format, web delivery, Chrome/Firefox

--codec=vp9
--crf=30
--pixel-format=yuv420p

ProRes (Professional)

Best for: Video editing, maximum quality, no compression

--codec=prores
--prores-profile=3  # HQ profile

Warning: Very large files (~1-2 GB/minute)

Quality vs File Size Reference

For 30-second 1080p video at 30fps:

CRF	Quality	File Size	Use Case
15	Excellent	80-100 MB	Archive, editing
18	High	45-60 MB	YouTube, high quality
21	Good	30-40 MB	Web, social media
23	Acceptable	20-30 MB	Web delivery
28	Preview	10-15 MB	Draft, testing

Platform-Specific Presets

YouTube

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p \
  --audio-codec=aac \
  --audio-bitrate=320k

Specifications:

Resolution: 1920x1080 or higher
Frame rate: 24, 25, 30, 48, 50, or 60 fps
Codec: H.264 or H.265
Audio: AAC-LC, 320 kbps

Twitter/X

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

Specifications:

Max duration: 2:20 (140 seconds)
Max file size: 512 MB
Resolution: Up to 1920x1200 or 1200x1920

Instagram Feed

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

Specifications:

Max duration: 60 seconds
Resolution: 1080x1080 (1:1) or 1080x1350 (4:5)
Frame rate: 30 fps
Codec: H.264

Instagram Reels/Stories

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

Specifications:

Resolution: 1080x1920 (9:16)
Max duration: 90 seconds (Reels), 15 seconds (Stories)
Frame rate: 30 fps

TikTok

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

Specifications:

Resolution: 1080x1920 (9:16)
Max duration: 10 minutes
Max file size: 287.6 MB
Frame rate: 30 or 60 fps

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

Specifications:

Max file size: 5 GB
Resolution: 256x144 to 4096x2304
Frame rate: 10-60 fps

Advanced Render Options

Concurrency (Faster Renders)

--concurrency=8  # Use 8 CPU cores

Image Sequence (for Post-Processing)

--sequence
--image-format=png

Outputs PNG sequence for After Effects, Premiere, etc.

Specific Frame Range

--frames=30-90  # Render frames 30-90 only

Scale Output

--scale=0.5  # Render at 50% resolution (960x540)

Useful for quick previews.

Overwrite Existing File

--overwrite

Custom Output Name

npx remotion render src/index.tsx VideoName "output/final-video.mp4"

Environment Variables

# Number of CPU cores to use
export REMOTION_CONCURRENCY=8

# Disable browser sandbox (Docker)
export REMOTION_DISABLE_CHROMIUM_SANDBOX=true

# Set custom Chromium path
export REMOTION_CHROMIUM_PATH=/path/to/chromium

Render Configuration File

Create remotion.config.ts:

import { Config } from "@remotion/cli/config";

Config.setCodec("h264");
Config.setCrf(18);
Config.setPixelFormat("yuv420p");
Config.setAudioBitrate("320k");
Config.setAudioCodec("aac");
Config.setConcurrency(8);
Config.setOverwriteOutput(true);

Then render with:

npx remotion render

Render Scripts

Add to package.json:

{
  "scripts": {
    "render:preview": "remotion render src/index.tsx VideoName preview.mp4 --crf=28 --preset=ultrafast",
    "render:draft": "remotion render src/index.tsx VideoName draft.mp4 --crf=23",
    "render:final": "remotion render src/index.tsx VideoName output.mp4 --codec=h264 --crf=18",
    "render:youtube": "remotion render src/index.tsx VideoName youtube.mp4 --codec=h264 --crf=18 --audio-bitrate=320k"
  }
}

Usage:

npm run render:youtube

Render Performance Tips

Use concurrency to utilize all CPU cores
Close other applications during render
Use SSD for faster file I/O
Reduce composition complexity if render is too slow
Test render small ranges before full render
Use image-format prop if you need transparency

Quality Verification Checklist

After rendering:

File plays without errors
Audio is in sync with video
Visual quality meets expectations
File size is reasonable for platform
No encoding artifacts visible
Colors look correct
Text is readable
Animations are smooth

Integration Workflow

Complete composition via other skills
Generate render config using this skill → RENDER_CONFIG.md
Run test render (first few seconds)
Verify quality and timing
Run full render
Upload to target platform

Integration with Other Skills

This skill is the FINAL STEP in the pipeline:

remotion-render-config (this skill)
    ↓ outputs: RENDER_CONFIG.md
    ↓ used after: All implementation is complete
    ↓ produces: Final video file

Works with:

/remotion-scaffold — Render outputs completed project
/remotion-composition — Renders structured composition
/remotion-component-gen — Renders implemented scenes
/remotion-spec-translator — Orchestrates this as final step

This skill provides production-ready render configurations that ensure high-quality video output optimized for target platforms.

Weekly Installs

Repository

ncklrs/startup-os-skills

GitHub Stars

First Seen

Jan 27, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode50

gemini-cli48

codex48

github-copilot48

claude-code46

cursor46

Skills CLI 使用指南：AI Agent 技能包管理器安装与管理教程

52,700 周安装

Remotion 渲染配置生成器 - 一键生成视频输出、编解码器、质量参数设置

🇨🇳中文介绍

Remotion 渲染配置

此技能的功能

范围边界

相关 Skills

输入/输出格式

输入格式：目标平台/质量要求

输出格式：RENDER_CONFIG.md

配置详情

输出格式

质量设置

分辨率

平台：YouTube

替代渲染选项

网络交付 (较小文件)

最高质量 (存档)

快速预览渲染

渲染工作流

后续步骤

故障排除

检查清单

编解码器参考

H.264 (兼容性最佳)

H.265 (HEVC) - 更好的压缩

VP9 (开源)

ProRes (专业级)

质量与文件大小参考

平台特定预设

YouTube

Twitter/X

Instagram 动态

Instagram Reels/Stories

TikTok

LinkedIn

高级渲染选项

并发 (更快渲染)

图像序列 (用于后期处理)

指定帧范围

缩放输出

覆盖现有文件

自定义输出名称

环境变量

渲染配置文件

渲染脚本

渲染性能提示

质量验证检查清单

集成工作流

与其他技能的集成

🇺🇸English

Remotion Render Config

What This Skill Does

Scope Boundaries

Input/Output Formats

Input Format: Target Platform/Quality Requirements

Output Format: RENDER_CONFIG.md

Configuration Details

Output Format

Quality Settings

Resolution

Platform: YouTube

Alternative Render Options

Web Delivery (Smaller File)

Maximum Quality (Archive)

Fast Preview Render

Render Workflow

Next Steps

Troubleshooting

Checklist

Codec Reference

H.264 (Most Compatible)

H.265 (HEVC) - Better Compression

VP9 (Open Source)

ProRes (Professional)

Quality vs File Size Reference

Platform-Specific Presets

YouTube

Twitter/X

Instagram Feed

Instagram Reels/Stories