Menu
Convert video scripts into production-ready Remotion projects with React components, audio, and rendering
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | script-to-remotion |
| description | Convert video scripts into production-ready Remotion projects with React components, audio, and rendering |
| tags | ["remotion","video","react","documentation"] |
| version | 3.0.0 |
将结构化的视频脚本转换为可运行的 Remotion 项目，包括 React 组件生成、TTS 音频集成、字幕生成和视频渲染。
使用此技能当您需要：
不要使用当：
article-to-script 技能）article-to-script 技能的输出此技能遵循 4阶段工作流：
为每个场景生成 React 组件
流程：
规则文件: rules/component-generation.md
场景类型指南: rules/scene-types/*.md（6个文件）
创建完整的 Remotion 项目结构
流程：
规则文件: rules/project-assembly.md
使用 Google Gemini API 生成 TTS 音频
流程：
规则文件: rules/tts-integration.md, rules/subtitle-generation.md
启动预览和渲染视频
流程：
pnpm start）pnpm build）规则文件: rules/render-configuration.md
# 1. 准备 script.json
# 假设已通过 article-to-script 生成
# 2. 参考 remotion-best-practices
Read .claude/skills/remotion-best-practices/skill.md
# 3. 参考 script-to-remotion 规则
Read .claude/skills/script-to-remotion/rules/component-generation.md
Read .claude/skills/script-to-remotion/rules/scene-types/*.md
# 4. 生成组件（为每个场景）
# 根据场景类型选择对应的模板和规则生成代码
# 5. 组装项目
Read .claude/skills/script-to-remotion/rules/project-assembly.md
# 按照说明创建完整项目结构
# 6. 可选：生成 TTS
Read .claude/skills/script-to-remotion/rules/tts-integration.md
# 创建并运行 tts-generator.js
# 7. 安装依赖
cd video-output-<timestamp>
pnpm install
# 8. 预览
pnpm start
# 浏览器访问 http://localhost:3000
# 9. 渲染
pnpm build
# 输出到 out/video.mp4
每种场景类型都有专门的模板和动画：
| 场景类型 | 时长 | 用途 | 关键特性 |
|---|---|---|---|
| hook | 5-8s | 开场钩子 | 打字机效果，弹跳动画 |
| textDisplay | 15-20s | 核心信息展示 | fitText 自适应，滑入动画 |
| numberComparison | 12-18s | 数据对比 | 数字动画，前后对比布局 |
| threeColumns | 15-20s | 三列对比 | 错位显示，Series 序列 |
| caseStudy | 20-30s | 案例故事 | TransitionSeries，前后转场 |
| cta | 8-12s | 行动号召 | 多步骤显示，强调动画 |
所有动画使用 Remotion 的 spring() 物理引擎：
const scale = spring({
frame,
fps,
config: { damping: 12, stiffness: 100 }
});
禁止使用 CSS 动画（违反 remotion-best-practices）
使用 @remotion/layout-utils 确保文本适配：
import { fitText, measureText } from '@remotion/layout-utils';
const fittedText = fitText({
text: narration,
withinWidth: 1600,
fontFamily: 'Inter',
fontSize: 80
});
自动将长旁白分段为易读的字幕：
所有工作流规则文档化在 rules/ 目录：
核心规则：
component-generation.md - React 组件生成指南project-assembly.md - 项目结构和配置render-configuration.md - Remotion 渲染设置troubleshooting.md - 常见问题解决场景类型指南（6个）：
scene-types/hook-scene.md - 开场钩子场景scene-types/text-display-scene.md - 文本展示场景scene-types/number-comparison-scene.md - 数字对比场景scene-types/three-columns-scene.md - 三列场景scene-types/case-study-scene.md - 案例故事场景scene-types/cta-scene.md - CTA 场景音频和字幕：
tts-integration.md - TTS 音频生成（可选）subtitle-generation.md - 字幕分段算法即用型代码模板在 templates/ 目录：
配置文件：
package.json.template - 项目依赖tsconfig.json.template - TypeScript 配置remotion.config.ts.template - Remotion 设置theme.ts - 霓虹玻璃态主题共享组件：
components/NeonBackground.tsx - 动态渐变背景components/SceneAudio.tsx - 音频播放器components/Subtitle.tsx - 字幕组件其他：
Root.tsx.template - 主组件模板tts-generator.js.template - TTS 生成脚本examples/script-input.json - 示例输入脚本examples/Hook-scene-example.tsx - 完整的 Hook 场景组件examples/complete-project/ - 完整项目参考所有 CLI 操作文档化在 commands/bash-commands.md：
关键规则：
每个生成的组件必须：
常见问题和解决方案在 rules/troubleshooting.md：
遇到问题时：
rules/troubleshooting.md 常见问题examples/ 示例实现remotion-best-practices 技能Turn paper links, blog posts, articles, or any worthy external content into curated entries for the Personal Blog curated section. Use this whenever the user sends a link and says 精选/curated/收录/加到这个模块/收录到精选/加到精选, or when you discover notable external content worth surfacing on the homepage. Each curated entry is a concise recommendation with your own reading notes — not just a link dump.
Explore a website that exposes a well-known agent manifest (RFC-8615 path) and answer questions or summarize content. Works on any site whose owner ships /.well-known/<name>-manifest.json with a structured tree, a public content endpoint dictionary, and natural-language instructions for agents. Use when the user asks "what's on <site>?", "summarize the latest post on <site>", "find resources about X on <site>", or wants you to act as a reader/agent on someone's personal site or content service.
Turn fragmented knowledge, rough notes, research snippets, interview takeaways, project learnings, paper excerpts, or partially formed ideas into structured archive cards for the Personal Blog archive system. Use this whenever the user asks to remember, 整理, 沉淀, 归档, 记到 archive, turn notes into cards, merge new knowledge into an existing archive note, or when they provide scattered points that should become a reusable archive card rather than a polished blog post. Also use this when new input should be matched against existing archive/blog content so similar notes are merged instead of duplicated.
Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are unavailable and an OS-level capture is needed.
Convert text to speech with Google Gemini TTS API at fixed 1.2x playback speed and WAV output. Use when users need fast narration generation from English or Chinese text, with optional voice and output filename.
Automatically engage with X (Twitter) home timeline by liking and replying to relevant tweets. The agent reads a persona profile (X-PROFILE.md), fetches timeline via script, filters tweets by relevance, generates comments directly, and publishes via script. Designed to run as a scheduled cron job (3x daily). Use when the user asks to set up X auto-engagement, configure a commenter persona, run timeline engagement, or troubleshoot engagement failures.