remotion-scaffold

Remotion 脚手架

为 Remotion 视频项目创建基础文件夹结构、配置文件和组织框架。此技能仅专注于项目搭建，不会生成动画逻辑或组件实现。

此技能的功能

生成项目脚手架，包括：

1. 目录结构 — 为合成、场景和资源组织文件夹布局
2. 配置文件 — 包含空模板的基础 constants.ts、types.ts
3. 空场景模板 — 带有 TODO 标记的占位场景组件
4. 资源目录 — 用于存放图像、音频和字体的分类文件夹
5. 注册设置 — 在 Root.tsx 中注册合成

范围边界

范围内：

• 创建文件夹结构
• 编写空文件模板
• 搭建配置骨架
• 目录组织模式

范围外：

• 动画实现（使用 /remotion-animation）
• 场景组件逻辑（使用 /remotion-component-gen）
• 序列合成（使用 /remotion-composition）
• 组件生成（使用 /remotion-component-gen）

输入/输出格式

输入格式：项目需求

接受项目搭建需求：

自然语言：

Create a new Remotion project scaffold for a 30-second video with 4 scenes.

结构化格式：

## Project Requirements

**Project Name:** ProductDemo
**Duration:** 30 seconds
**Frame Rate:** 30 fps
**Dimensions:** 1920x1080 (16:9)
**Number of Scenes:** 4 (Intro, Features, Demo, CTA)
**Asset Types:** Images, Audio (music + SFX)

输出格式：SCAFFOLD_MANIFEST.md

生成一份清单，记录创建的结构：

# Scaffold Manifest: ProductDemo

## Status
✅ Directory structure created
✅ Configuration files generated
✅ Scene templates created (empty)
⏳ Ready for implementation

## Generated Structure

src/remotion/compositions/ProductDemo/ ├── index.tsx # ✅ 已创建 - 主合成（空） ├── constants.ts # ✅ 已创建 - 常量模板 ├── types.ts # ✅ 已创建 - 类型定义 └── scenes/ ├── Scene1Intro.tsx # ✅ 已创建 - 空模板 ├── Scene2Features.tsx # ✅ 已创建 - 空模板 ├── Scene3Demo.tsx # ✅ 已创建 - 空模板 └── Scene4CTA.tsx # ✅ 已创建 - 空模板

public/ ├── images/ # ✅ 已创建 - 空目录 ├── audio/ │ ├── music/ # ✅ 已创建 - 空目录 │ └── sfx/ # ✅ 已创建 - 空目录 └── fonts/ # ✅ 已创建 - 空目录

## File Templates Created

### Main Composition: `index.tsx`
```typescript
import { AbsoluteFill, Sequence } from "remotion";
import { SCENE_TIMING } from "./constants";
import { Scene1Intro } from "./scenes/Scene1Intro";
import { Scene2Features } from "./scenes/Scene2Features";
import { Scene3Demo } from "./scenes/Scene3Demo";
import { Scene4CTA } from "./scenes/Scene4CTA";
import type { ProductDemoProps } from "./types";

export function ProductDemo({}: ProductDemoProps) {
  return (
    <AbsoluteFill>
      {/* TODO: Add composition layout via /remotion-composition */}
      <Sequence
        from={SCENE_TIMING.intro.start}
        durationInFrames={SCENE_TIMING.intro.duration}
      >
        <Scene1Intro />
      </Sequence>

      {/* Additional scenes... */}
    </AbsoluteFill>
  );
}

常量：constants.ts

// TODO: Define color palette
export const COLORS = {
  // Add colors here
} as const;

// TODO: Configure spring animations via /remotion-animation
export const SPRING_CONFIGS = {
  // Add spring configs here
} as const;

// Scene timing (30fps, 30 seconds total = 900 frames)
const FPS = 30;

export const SCENE_TIMING = {
  intro: { start: 0, duration: 5 * FPS },
  features: { start: 5 * FPS, duration: 10 * FPS },
  demo: { start: 15 * FPS, duration: 10 * FPS },
  cta: { start: 25 * FPS, duration: 5 * FPS },
} as const;

类型：types.ts

export interface ProductDemoProps {
  // Add custom props here
}

export interface SceneProps {
  // Common scene props
}

场景模板：scenes/Scene1Intro.tsx

import { AbsoluteFill } from "remotion";

export function Scene1Intro() {
  return (
    <AbsoluteFill>
      {/* TODO: Implement scene via /remotion-component-gen */}
    </AbsoluteFill>
  );
}

后续步骤

1. 定义动画 → 运行 /remotion-animation 生成动画配置
2. 构建合成 → 运行 /remotion-composition 构建 Sequence 布局
3. 实现场景 → 为每个场景运行 /remotion-component-gen
4. 配置渲染 → 运行 /remotion-render-config 配置输出设置
5. 添加资源 → 运行 /remotion-asset-coordinator 准备资源

配置摘要

设置	值
合成 ID	ProductDemo
时长	30 秒（900 帧）
帧率	30 fps
尺寸	1920x1080（16:9）
场景	4 个（Intro、Features、Demo、CTA）
状态	脚手架搭建完成，可开始实现

文件位置

所有文件均创建于：

• 合成： /path/to/project/src/remotion/compositions/ProductDemo/
• 资源： /path/to/project/public/

脚手架清单

创建清单：

• 创建组合文件夹结构
• 生成主组合文件（index.tsx），并添加 TODO 标记
• 将常量文件（constants.ts）生成为模板
• 生成类型文件（types.ts）
• 创建空场景组件文件
• 创建资源目录（public/images/、public/audio/）
• 添加组合注册框架
• 动画实现（下一步：/remotion-animation）
• 组合逻辑（下一步：/remotion-composition）
• 场景实现（下一步：/remotion-component-gen）

## Directory Structure Patterns

### Pattern 1: Simple Project (1-2 scenes)

src/remotion/compositions/VideoName/ ├── index.tsx # 主组合 ├── constants.ts # 配置常量 └── types.ts # TypeScript 类型

### Pattern 2: Multi-Scene Project (3+ scenes)

src/remotion/compositions/VideoName/ ├── index.tsx # 主组合 ├── constants.ts # 共享常量 ├── types.ts # 类型定义 └── scenes/ ├── Scene1.tsx ├── Scene2.tsx └── Scene3.tsx

### Pattern 3: Complex Project (with audio)

src/remotion/compositions/VideoName/ ├── index.tsx # 主组合 ├── constants.ts # 配置 ├── types.ts # 类型 ├── audio.ts # 音频配置 └── scenes/ └── ...

### Pattern 4: Component Library Project

src/remotion/ ├── components/ │ ├── particles/ │ ├── text/ │ ├── progress/ │ └── transitions/ ├── compositions/ │ └── VideoName/ └── utils/ ├── seededRandom.ts └── timing.ts

## File Templates

### Empty Main Composition

```typescript
import { AbsoluteFill } from "remotion";
import type { VideoNameProps } from "./types";

export function VideoName({}: VideoNameProps) {
  return (
    <AbsoluteFill>
      {/* TODO: Add composition structure via /remotion-composition */}
    </AbsoluteFill>
  );
}

空常量模板

// TODO: Define via /remotion-animation
export const COLORS = {} as const;
export const SPRING_CONFIGS = {} as const;
export const SCENE_TIMING = {} as const;

空类型模板

export interface VideoNameProps {
  // Add props here
}

空场景模板

import { AbsoluteFill } from "remotion";

export function Scene1() {
  return (
    <AbsoluteFill>
      {/* TODO: Implement via /remotion-component-gen */}
    </AbsoluteFill>
  );
}

注册模板

添加到 src/remotion/Root.tsx：

import { Composition } from "remotion";
import { VideoName } from "./compositions/VideoName";

// Add to RemotionRoot component:
<Composition
  id="VideoName"
  component={VideoName}
  durationInFrames={900}  // TODO: Calculate based on requirements
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{}}
/>

视频格式预设

常见视频格式速查：

// YouTube (16:9)
{ width: 1920, height: 1080, fps: 30 }

// Instagram Reels / TikTok (9:16)
{ width: 1080, height: 1920, fps: 30 }

// Twitter/X (16:9)
{ width: 1920, height: 1080, fps: 30 }

// Square (1:1)
{ width: 1080, height: 1080, fps: 30 }

资源目录组织

标准资源目录结构：

public/
├── images/
│   ├── logos/
│   ├── backgrounds/
│   └── icons/
├── audio/
│   ├── music/
│   └── sfx/
└── fonts/
    └── [custom-fonts].woff2

脚手架工作流

1. 解析需求 → 提取项目名称、时长、场景和格式
2. 创建目录 → 生成文件夹结构
3. 编写空模板 → 创建带 TODO 标记的文件
4. 设置注册 → 将组合添加到 Root.tsx
5. 生成清单 → 在 SCAFFOLD_MANIFEST.md 中记录创建的结构
6. 交接 → 转交给专用技能进行实现

与其他技能的集成

此技能是工作流中的第一步：

remotion-scaffold (this skill)
    ↓ outputs: SCAFFOLD_MANIFEST.md
remotion-animation
    ↓ outputs: ANIMATION_CONFIG.md
remotion-composition
    ↓ outputs: COMPOSITION_STRUCTURE.md
remotion-component-gen (per scene)
    ↓ outputs: SCENE_COMPONENT.md
remotion-render-config
    ↓ outputs: RENDER_CONFIG.md

配合使用：

• /motion-designer — 项目需求可能来自设计规格
• /remotion-animation — 动画配置的下一步
• /remotion-composition — 组合结构的下一步
• /remotion-component-gen — 场景实现的下一步
• /remotion-render-config — 渲染设置的最后一步

---

此技能提供简洁、精简的项目脚手架，为 Remotion 实现工作流奠定基础。