关于 create-video-start
create-video-start 是一个编排技能,可按顺序调用专用技能,将创意简报转为 Remotion 视频项目。它逐步验证结果,并汇总生成的规格、组件及项目指引。
主要功能
- 01按序运行 Remotion 制作流程
- 02生成视频规格与项目脚手架
- 03协调动画、合成及场景生成
- 04准备渲染设置与资源清单
- 05验证输出并汇总产物
适用场景
- 01从创意简报启动 Remotion 项目
- 02为多场景视频生成场景组件
- 03汇总流程产物和开发后续步骤
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ ncklrs/ startup-os-skills --skill create-video-start安装后在 Claude Code 中输入/create-video-start确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
rules/_sections.mdclaude-cli-patterns.mdcontext-passing.mderror-handling.mdpipeline-order.md详细介绍
创建视频起始
主编排技能,将整个 Remotion 视频流水线串联起来。接收一份创意简报,并自动依次调用各项专用技能,在它们之间传递输出。
此技能的功能
编排完整的视频创建流水线:
- motion-designer → 根据创意简报创建 VIDEO_SPEC.md
- remotion-scaffold → 搭建项目结构
- remotion-animation → 生成动画配置
- remotion-composition → 创建 Sequence 布局
- remotion-component-gen → 生成每个场景组件
- remotion-render-config → 配置输出设置
- remotion-asset-coordinator → 准备资源清单
流水线执行
调用后,按顺序执行此流水线:
步骤 0:设置
为流水线产物创建工作目录:
# Create pipeline working directory
PIPELINE_DIR=".remotion-pipeline/$(date +%Y%m%d_%H%M%S)"
mkdir -p "$PIPELINE_DIR"
echo "Pipeline artifacts: $PIPELINE_DIR"
步骤 1:Motion Designer → VIDEO_SPEC.md
根据创意简报生成动态设计规范:
# Invoke motion-designer skill
claude -p "You are using the /motion-designer skill.
Create a detailed VIDEO_SPEC.md for this creative brief:
$CREATIVE_BRIEF
Output a complete motion design specification with:
- Overview (duration, fps, dimensions)
- Color palette with hex codes
- Scene-by-scene breakdown with timing
- Animation details for each element
- Audio specifications
Write the spec to: $PIPELINE_DIR/VIDEO_SPEC.md" \
--allowedTools "Read,Write,Edit,Bash"
检查点: 确认 VIDEO_SPEC.md 存在,且包含所有必需章节。
步骤 2:Remotion Scaffold → SCAFFOLD_MANIFEST.md
创建项目文件夹结构:
# Invoke remotion-scaffold skill
claude -p "You are using the /remotion-scaffold skill.
Based on this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)
Create the Remotion project scaffold:
1. Create folder structure for the composition
2. Create empty template files
3. Setup asset directories
4. Register composition in Root.tsx
Write manifest to: $PIPELINE_DIR/SCAFFOLD_MANIFEST.md
Write actual files to the project." \
--allowedTools "Read,Write,Edit,Bash,Glob"
检查点: 确认脚手架目录和文件均已创建。
步骤 3:Remotion Animation → ANIMATION_CONFIG.md
生成动画配置:
# Invoke remotion-animation skill
claude -p "You are using the /remotion-animation skill.
Based on this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)
Generate animation configurations:
1. Spring configs for each animation type
2. Interpolation mappings
3. Timing constants
4. Stagger delay patterns
Write to: $PIPELINE_DIR/ANIMATION_CONFIG.md
Output TypeScript constants that can be copied to constants.ts" \
--allowedTools "Read,Write,Edit"
检查点: 确认 ANIMATION_CONFIG.md 包含 spring 配置和时间设置。
步骤 4:Remotion Composition → COMPOSITION_STRUCTURE.md
生成 Sequence 布局:
# Invoke remotion-composition skill
claude -p "You are using the /remotion-composition skill.
Based on this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)
Generate composition structure:
1. Sequence ordering for all scenes
2. Transition timing between scenes
3. Duration calculations
4. Scene timing constants
Write to: $PIPELINE_DIR/COMPOSITION_STRUCTURE.md
Output the main composition JSX structure." \
--allowedTools "Read,Write,Edit"
检查点: 确认 COMPOSITION_STRUCTURE.md 包含 Sequence 布局。
步骤 5:Remotion Component Gen → SCENE_COMPONENT.md(每个场景)
生成每个场景组件:
# For each scene in the spec, invoke remotion-component-gen
for SCENE_NUM in $(seq 1 $TOTAL_SCENES); do
claude -p "You are using the /remotion-component-gen skill.
Based on Scene $SCENE_NUM from this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)
And these animation configs:
$(cat $PIPELINE_DIR/ANIMATION_CONFIG.md)
Generate the complete Scene${SCENE_NUM} component:
1. Full TSX implementation
2. Animation logic using the configs
3. Proper imports and types
4. AbsoluteFill wrapper
Write to: $PIPELINE_DIR/SCENE_${SCENE_NUM}_COMPONENT.md
Also write the actual .tsx file to the scenes/ folder." \
--allowedTools "Read,Write,Edit,Glob"
done
检查点: 确认所有场景组件均已生成。
步骤 6:Remotion Render Config → RENDER_CONFIG.md
生成渲染设置:
# Invoke remotion-render-config skill
claude -p "You are using the /remotion-render-config skill.
Based on this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)
Generate render configuration:
1. Output format and codec settings
2. Quality settings
3. Resolution confirmation
4. Render command examples
Write to: $PIPELINE_DIR/RENDER_CONFIG.md" \
--allowedTools "Read,Write,Edit"
步骤 7:Remotion Asset Coordinator → ASSET_MANIFEST.md
生成资源准备指南:
# Invoke remotion-asset-coordinator skill
claude -p "You are using the /remotion-asset-coordinator skill.
Based on this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)
And this SCAFFOLD_MANIFEST.md:
$(cat $PIPELINE_DIR/SCAFFOLD_MANIFEST.md)
Generate asset manifest:
1. List all required assets
2. Recommend sources for each
3. Provide preparation instructions
4. Generate import code snippets
Write to: $PIPELINE_DIR/ASSET_MANIFEST.md" \
--allowedTools "Read,Write,Edit,WebSearch"
步骤 8:汇总最终输出
将所有输出整合为最终摘要:
# Create final summary
claude -p "Create a PIPELINE_COMPLETE.md summary that:
1. Lists all generated files
2. Provides next steps for the developer
3. Includes quick-start commands
4. Notes any TODOs that need manual attention
Pipeline artifacts:
- VIDEO_SPEC.md: $(cat $PIPELINE_DIR/VIDEO_SPEC.md | head -20)
- SCAFFOLD_MANIFEST.md: $(cat $PIPELINE_DIR/SCAFFOLD_MANIFEST.md | head -20)
- ANIMATION_CONFIG.md: $(cat $PIPELINE_DIR/ANIMATION_CONFIG.md | head -20)
- COMPOSITION_STRUCTURE.md: $(cat $PIPELINE_DIR/COMPOSITION_STRUCTURE.md | head -20)
- Scene components: $(ls $PIPELINE_DIR/SCENE_*_COMPONENT.md)
- RENDER_CONFIG.md: $(cat $PIPELINE_DIR/RENDER_CONFIG.md | head -20)
- ASSET_MANIFEST.md: $(cat $PIPELINE_DIR/ASSET_MANIFEST.md | head -20)
Write to: $PIPELINE_DIR/PIPELINE_COMPLETE.md" \
--allowedTools "Read,Write,Edit,Glob"
输入格式
创意简报(自然语言)
Create a 30-second product demo video for Vello, an AI task management app.
Show the main features: smart scheduling, team collaboration, and AI suggestions.
Use modern, clean aesthetic with the brand colors (orange #FF6B35, dark background).
Include upbeat background music and subtle sound effects for transitions.
Target platform: YouTube and Twitter.
结构化简报
## Video Brief
**Product:** Vello - AI Task Management
**Duration:** 30 seconds
**Style:** Modern, clean, tech-forward
**Brand Colors:**
- Primary: #FF6B35 (Orange)
- Background: #0A0A0A (Dark)
- Accent: #4ECDC4 (Teal)
**Key Messages:**
1. Smart AI scheduling
2. Team collaboration
3. Instant AI suggestions
**Scenes:**
1. Logo intro (5s)
2. Feature showcase (15s)
3. Social proof (5s)
4. CTA (5s)
**Audio:**
- Background: Upbeat electronic
- SFX: Subtle whooshes, clicks
**Target Platforms:** YouTube, Twitter
输出格式
PIPELINE_COMPLETE.md
# Pipeline Complete: [Video Name]
## Execution Summary
| Step | Skill | Output | Status |
|------|-------|--------|--------|
| 1 | motion-designer | VIDEO_SPEC.md | ✅ |
| 2 | remotion-scaffold | SCAFFOLD_MANIFEST.md | ✅ |
| 3 | remotion-animation | ANIMATION_CONFIG.md | ✅ |
| 4 | remotion-composition | COMPOSITION_STRUCTURE.md | ✅ |
| 5 | remotion-component-gen | SCENE_*_COMPONENT.md | ✅ |
| 6 | remotion-render-config | RENDER_CONFIG.md | ✅ |
| 7 | remotion-asset-coordinator | ASSET_MANIFEST.md | ✅ |
## Generated Files
### Pipeline Artifacts
.remotion-pipeline/20240123_143052/ ├── VIDEO_SPEC.md ├── SCAFFOLD_MANIFEST.md ├── ANIMATION_CONFIG.md ├── COMPOSITION_STRUCTURE.md ├── SCENE_1_COMPONENT.md ├── SCENE_2_COMPONENT.md ├── SCENE_3_COMPONENT.md ├── SCENE_4_COMPONENT.md ├── RENDER_CONFIG.md ├── ASSET_MANIFEST.md └── PIPELINE_COMPLETE.md
### Project Files Created
src/remotion/compositions/VideoName/ ├── index.tsx ✅ 主合成 ├── constants.ts ✅ 颜色、spring、时间设置 ├── types.ts ✅ TypeScript 接口 └── scenes/ ├── Scene1Intro.tsx ✅ 已实现 ├── Scene2Features.tsx ✅ 已实现 ├── Scene3Proof.tsx ✅ 已实现 └── Scene4CTA.tsx ✅ 已实现
public/ ├── images/ 📁 可添加资源 ├── audio/ │ ├── music/ 📁 可添加音乐 │ └── sfx/ 📁 可添加音效 └── fonts/ 📁 可添加字体
## Quick Start
```bash
# Preview the video
npm run dev
# Open Remotion Studio
# Navigate to http://localhost:3000
# Render final video
npx remotion render src/index.tsx VideoName output.mp4
后续步骤
必需操作
- 将背景音乐添加到
public/audio/music/ - 将音效添加到
public/audio/sfx/ - 将产品图片添加到
public/images/ - 检查并自定义
constants.ts中的颜色
可选增强
- 运行
/remotion-video-reviewer进行 QA 检查 - 运行
/remotion-performance-optimizer优化渲染
渲染命令
参见 RENDER_CONFIG.md:
# YouTube (1080p, high quality)
npx remotion render src/index.tsx VideoName youtube-output.mp4 \
--codec h264 --crf 18
# Twitter (optimized file size)
npx remotion render src/index.tsx VideoName twitter-output.mp4 \
--codec h264 --crf 23
# Preview frames
npx remotion still src/index.tsx VideoName preview.png --frame=150
流水线耗时
- 总执行时间:约 3-5 分钟
- 动态设计:约 45 秒
- 脚手架:约 15 秒
- 动画配置:约 20 秒
- 合成:约 15 秒
- 场景组件:每个场景约 30 秒
- 渲染配置:约 10 秒
- 资源清单:约 20 秒
## Execution Instructions
When this skill is invoked:
1. **Parse the creative brief** from the user's input
2. **Create pipeline directory** with timestamp
3. **Execute each step sequentially** using `claude -p` for skill invocation
4. **Validate output** after each step before proceeding
5. **Handle errors gracefully** - if a step fails, report and offer to retry
6. **Assemble final summary** with all artifacts and next steps
### Error Handling
If any step fails:
```bash
# Retry pattern
MAX_RETRIES=2
RETRY_COUNT=0
while [ $RETRY_COUNT -lt $MAX_RETRIES ]; do
# Attempt skill invocation
if claude -p "..." --allowedTools "..."; then
break
fi
RETRY_COUNT=$((RETRY_COUNT + 1))
echo "Retry $RETRY_COUNT of $MAX_RETRIES"
done
if [ $RETRY_COUNT -eq $MAX_RETRIES ]; then
echo "Step failed after $MAX_RETRIES retries"
# Log error and continue with partial output
fi
集成说明
此技能会协调以下子技能:
| 技能 | 调用方式 | 输出 |
|---|---|---|
/motion-designer | claude -p "..." | VIDEO_SPEC.md |
/remotion-scaffold | claude -p "..." | SCAFFOLD_MANIFEST.md + 文件 |
/remotion-animation | claude -p "..." | ANIMATION_CONFIG.md |
/remotion-composition | claude -p "..." | COMPOSITION_STRUCTURE.md |
/remotion-component-gen | claude -p "..."(×N) | SCENE_*_COMPONENT.md + 文件 |
/remotion-render-config | claude -p "..." | RENDER_CONFIG.md |
/remotion-asset-coordinator | claude -p "..." | ASSET_MANIFEST.md |
每次调用 claude -p 都包含:
- 技能上下文/说明
- 前序步骤的相关输出
- 指定的输出文件路径
- 该步骤允许使用的工具
使用示例
# Invoke with natural language brief
/create-video-start Create a 30-second demo video for our AI task app Vello
# Invoke with detailed brief
/create-video-start <<EOF
Product: Vello AI Task Manager
Duration: 45 seconds
Style: Modern tech, dark theme
Scenes: Intro, Features (3), Testimonial, CTA
Brand: Orange #FF6B35, Dark #0A0A0A
Target: YouTube, LinkedIn
EOF
技能依赖
需要安装以下技能:
/motion-designer- 视频规格创建/remotion-scaffold- 项目结构设置/remotion-animation- 动画配置/remotion-composition- 序列布局/remotion-component-gen- 场景组件生成/remotion-render-config- 渲染设置/remotion-asset-coordinator- 资源准备
此编排器无需在技能之间手动交接,即可根据单个创意简报创建完整的视频项目。