remotion-claude-agent-demo 0.1.0

package/templates/.claude/skills/render-config/SKILL.md

@@ -0,0 +1,290 @@
+---
+name: render-config
+version: 1.0.0
+description: 渲染配置技能。管理视频输出规格、编码参数、质量预设等渲染设置。
+triggers:
+  - 渲染配置
+  - 输出设置
+  - render
+  - 视频导出
+tools:
+  - Read
+  - Write
+  - Bash
+---
+
+# 渲染配置技能 (Render Config)
+
+管理Remotion视频渲染的各项配置，提供标准化的输出规格和质量预设。
+
+## 输出规格预设
+
+### 1. 分辨率选项
+
+| 预设名称 | 分辨率 | 宽高比 | 适用场景 |
+|----------|--------|--------|----------|
+| 1080p | 1920×1080 | 16:9 | YouTube、通用 |
+| 4K | 3840×2160 | 16:9 | 高清展示 |
+| 720p | 1280×720 | 16:9 | 快速预览 |
+| vertical | 1080×1920 | 9:16 | 抖音、小红书 |
+| square | 1080×1080 | 1:1 | Instagram |
+
+### 2. 帧率选项
+
+| 帧率 | 适用场景 |
+|------|----------|
+| 30fps | 标准视频（默认） |
+| 60fps | 流畅动画 |
+| 24fps | 电影感 |
+
+## Remotion 渲染命令
+
+### 基础命令结构
+
+```bash
+npx remotion render <entry-file> <composition-id> <output-path> [options]
+```
+
+### 常用预设命令
+
+```bash
+# 1080p 标准质量（推荐）
+npx remotion render src/index.ts MyVideo out/video.mp4 \
+  --codec h264 \
+  --crf 18 \
+  --pixel-format yuv420p
+
+# 4K 高质量
+npx remotion render src/index.ts MyVideo out/video-4k.mp4 \
+  --codec h264 \
+  --crf 15 \
+  --scale 2 \
+  --pixel-format yuv420p
+
+# 720p 快速预览
+npx remotion render src/index.ts MyVideo out/preview.mp4 \
+  --codec h264 \
+  --crf 28 \
+  --scale 0.67 \
+  --every-nth-frame 2
+
+# 竖屏视频（需要在 Root.tsx 中配置 1080×1920）
+npx remotion render src/index.ts MyVideoVertical out/video-vertical.mp4 \
+  --codec h264 \
+  --crf 18
+
+# GIF 预览（前 3 秒）
+npx remotion render src/index.ts MyVideo out/preview.gif \
+  --frames 0-90 \
+  --scale 0.5
+```
+
+## 编码参数详解
+
+### CRF (恒定质量因子)
+
+CRF 控制视频质量和文件大小的平衡：
+
+| CRF 值 | 质量 | 文件大小 | 推荐场景 |
+|--------|------|----------|----------|
+| 15-17 | 极高 | 最大 | 存档、后期编辑 |
+| 18-20 | 高 | 较大 | 最终发布（推荐） |
+| 21-23 | 中等 | 中等 | 一般用途 |
+| 24-28 | 较低 | 较小 | 预览、快速分享 |
+
+### 编码器选项
+
+```bash
+# H.264 - 兼容性最好（默认）
+--codec h264
+
+# H.265 - 更小文件，更高质量
+--codec h265
+
+# ProRes - 专业后期
+--codec prores
+
+# VP9 - 网页优化
+--codec vp9
+```
+
+### 像素格式
+
+```bash
+# YUV 4:2:0 - 标准格式，兼容性好
+--pixel-format yuv420p
+
+# YUV 4:4:4 - 高质量，文件更大
+--pixel-format yuv444p
+```
+
+## 配置文件
+
+### remotion.config.ts
+
+```typescript
+import { Config } from "@remotion/cli/config";
+
+// 默认配置
+Config.setCodec("h264");
+Config.setCrf(18);
+Config.setPixelFormat("yuv420p");
+Config.setConcurrency(8); // 并行渲染线程数
+
+// 输出目录
+Config.setOutputLocation("out/video.mp4");
+
+// 日志级别
+Config.setLogLevel("info"); // verbose | info | warn | error
+```
+
+### package.json 脚本
+
+```json
+{
+  "scripts": {
+    "preview": "remotion preview src/index.ts",
+    "render": "remotion render src/index.ts MyVideo out/video.mp4",
+    "render:hq": "remotion render src/index.ts MyVideo out/video-hq.mp4 --crf 15",
+    "render:preview": "remotion render src/index.ts MyVideo out/preview.mp4 --crf 28 --scale 0.5",
+    "render:4k": "remotion render src/index.ts MyVideo out/video-4k.mp4 --scale 2 --crf 15",
+    "render:vertical": "remotion render src/index.ts MyVideoVertical out/video-vertical.mp4",
+    "render:gif": "remotion render src/index.ts MyVideo out/preview.gif --frames 0-90"
+  }
+}
+```
+
+## 多分辨率输出
+
+在 Root.tsx 中定义多个 Composition：
+
+```tsx
+import { Composition } from "remotion";
+import { MainVideo, TOTAL_DURATION } from "./MainVideo";
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      {/* 标准 1080p */}
+      <Composition
+        id="MyVideo"
+        component={MainVideo}
+        durationInFrames={TOTAL_DURATION}
+        fps={30}
+        width={1920}
+        height={1080}
+      />
+
+      {/* 竖屏 9:16 */}
+      <Composition
+        id="MyVideoVertical"
+        component={MainVideo}
+        durationInFrames={TOTAL_DURATION}
+        fps={30}
+        width={1080}
+        height={1920}
+      />
+
+      {/* 方形 1:1 */}
+      <Composition
+        id="MyVideoSquare"
+        component={MainVideo}
+        durationInFrames={TOTAL_DURATION}
+        fps={30}
+        width={1080}
+        height={1080}
+      />
+    </>
+  );
+};
+```
+
+## 批量渲染脚本
+
+```bash
+#!/bin/bash
+# scripts/render-all.sh
+
+echo "🎬 开始批量渲染..."
+
+# 1080p 标准版
+echo "📹 渲染 1080p 版本..."
+npx remotion render src/index.ts MyVideo out/video-1080p.mp4 --crf 18
+
+# 720p 预览版
+echo "📹 渲染 720p 预览版..."
+npx remotion render src/index.ts MyVideo out/video-720p.mp4 --crf 23 --scale 0.67
+
+# 竖屏版
+echo "📹 渲染竖屏版本..."
+npx remotion render src/index.ts MyVideoVertical out/video-vertical.mp4 --crf 18
+
+# GIF 预览
+echo "📹 生成 GIF 预览..."
+npx remotion render src/index.ts MyVideo out/preview.gif --frames 0-90 --scale 0.5
+
+echo "✅ 所有渲染完成！"
+ls -la out/
+```
+
+## 渲染性能优化
+
+### 1. 并行渲染
+
+```bash
+# 使用更多线程（默认为 CPU 核心数的一半）
+npx remotion render ... --concurrency 16
+```
+
+### 2. 跳帧预览
+
+```bash
+# 每隔2帧渲染一帧，速度翻倍
+npx remotion render ... --every-nth-frame 2
+```
+
+### 3. 指定帧范围
+
+```bash
+# 只渲染前100帧
+npx remotion render ... --frames 0-100
+
+# 渲染中间部分
+npx remotion render ... --frames 500-1000
+```
+
+### 4. GPU 加速
+
+```bash
+# 启用 GPU 编码（如果支持）
+npx remotion render ... --gl angle
+```
+
+## 质量检查清单
+
+渲染完成后的检查项：
+
+- [ ] 文件大小合理（1分钟约 10-30MB）
+- [ ] 播放流畅无卡顿
+- [ ] 音画同步
+- [ ] 字幕清晰可读
+- [ ] 颜色正确无偏色
+- [ ] 开头结尾无黑屏
+
+## 推荐工作流
+
+```
+1. 开发阶段
+   └─ npm run preview  (实时预览)
+
+2. 测试阶段
+   └─ npm run render:preview  (快速低质量渲染)
+
+3. 最终输出
+   └─ npm run preflight  (预检)
+   └─ npm run render  (标准质量渲染)
+
+4. 多平台发布
+   └─ npm run render:4k  (YouTube 4K)
+   └─ npm run render:vertical  (抖音/小红书)
+```

package/templates/.claude/skills/script-writer/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: script-writer
+description: 视频脚本编写技能。专注于产品教程、Demo演示、SaaS介绍的脚本撰写。
+---
+
+## 脚本结构
+
+### 产品教程 (2-4分钟)
+```
+1. Hook (5秒) - 问题/痛点引入
+2. 概述 (15秒) - 今天学什么
+3. 步骤演示 (主体) - 分步讲解
+4. 总结 (10秒) - 关键点回顾
+5. CTA (5秒) - 行动号召
+```
+
+### Demo演示 (4-7分钟)
+```
+1. Hook (10秒) - 展示最终效果
+2. 问题 (20秒) - 用户痛点
+3. 解决方案 (30秒) - 产品定位
+4. 功能演示 (主体) - 核心功能展示
+5. 价值总结 (15秒) - 用户收益
+6. CTA (10秒) - 如何开始
+```
+
+### SaaS介绍 (3-5分钟)
+```
+1. Hook (10秒) - 痛点场景
+2. 产品介绍 (20秒) - 一句话定位
+3. 核心功能 (主体) - 3-5个亮点
+4. 社会证明 (15秒) - 数据/案例
+5. CTA (10秒) - 注册/试用
+```
+
+## 写作原则
+
+- **语言自然** - 口语化，适合配音朗读
+- **节奏紧凑** - 每句话有信息量
+- **画面配合** - 标注视觉提示
+- **CTA明确** - 告诉观众下一步做什么
+
+## 输出格式
+
+```yaml
+script:
+  title: string
+  type: "tutorial" | "demo" | "saas_intro"
+  total_duration: number
+  language: "zh-CN" | "en-US"
+
+  segments:
+    - id: "seg_01"
+      type: "hook" | "problem" | "solution" | "demo" | "summary" | "cta"
+      duration: number
+      narration: string
+      visual_notes: string
+      emphasis: string[]
+```

package/templates/.claude/skills/style-director/script-writer/SKILL.md

@@ -0,0 +1,82 @@
+---
+name: script-writer
+description: 视频脚本编写技能。专注于产品教程、Demo演示、SaaS介绍的脚本撰写。
+---
+
+## 脚本结构
+
+### 产品教程 (2-4分钟)
+```
+1. Hook (5秒) - 问题/痛点引入
+2. 概述 (15秒) - 今天学什么
+3. 步骤演示 (主体) - 分步讲解
+4. 总结 (10秒) - 关键点回顾
+5. CTA (5秒) - 行动号召
+```
+
+### Demo演示 (4-7分钟)
+```
+1. Hook (10秒) - 展示最终效果
+2. 问题 (20秒) - 用户痛点
+3. 解决方案 (30秒) - 产品定位
+4. 功能演示 (主体) - 核心功能展示
+5. 价值总结 (15秒) - 用户收益
+6. CTA (10秒) - 如何开始
+```
+
+### SaaS介绍 (3-5分钟)
+```
+1. Hook (10秒) - 痛点场景
+2. 产品介绍 (20秒) - 一句话定位
+3. 核心功能 (主体) - 3-5个亮点
+4. 社会证明 (15秒) - 数据/案例
+5. CTA (10秒) - 注册/试用
+```
+
+## 写作原则
+
+- **语言自然** - 口语化，适合配音朗读
+- **节奏紧凑** - 每句话有信息量
+- **画面配合** - 标注视觉提示（必须可执行）
+- **CTA明确** - 告诉观众下一步做什么
+- **拒绝泛词** - 避免“高级/大气/科技感”等空泛描述，必须写清动作与画面结果
+- **贴合用户需求** - 视觉提示需直接服务于用户场景/痛点/卖点
+
+## 输出格式
+
+```yaml
+script:
+  title: string
+  type: "tutorial" | "demo" | "saas_intro"
+  total_duration: number
+  language: "zh-CN" | "en-US"
+
+  segments:
+    - id: "seg_01"
+      type: "hook" | "problem" | "solution" | "demo" | "summary" | "cta"
+      duration: number
+      narration: string
+      visual_notes: string  # 必须遵守下方模板（单字段多行）
+      emphasis: string[]
+```
+
+## 视觉提示固定模板（必须遵守）
+
+`visual_notes` 必须使用如下结构（单字段、多行文本）：
+
+```
+布局：<一句话描述构图/区域划分>
+元素：<主要元素列表与层级>
+动画：<入场/停留/退场的运动方式>
+节奏：<关键时间点或秒数范围>
+风格：<色彩/光效/质感/氛围>
+```
+
+**示例**
+```
+布局：左侧大标题 + 右侧录屏卡片
+元素：左侧标题/副标题，右侧屏幕录屏 + 光晕边框
+动画：标题自左滑入并轻弹；录屏卡片淡入+微缩放
+节奏：0-0.6s 入场，0.6-3.0s 展示，3.0-3.5s 淡出
+风格：深色科技背景，主色蓝青对比，玻璃态边框
+```

package/templates/.claude/skills/style-director/style-director/SKILL.md

@@ -0,0 +1,287 @@
+---
+name: style-director
+description: 视觉风格指导技能。定义统一的视觉风格、配色、字体、动效节奏，确保产品教程 / Demo 演示 / SaaS 介绍类视频的整体一致性与高端质感。
+---
+
+## 核心技术约定 (Remotion Implementation)
+
+- FPS：30（标准）/ 60（丝滑）；需要电影感可用 24
+- 分辨率：1920x1080（16:9）/ 1080x1920（9:16）；高端交付可升级 4K
+- 动效引擎：位移优先 `spring`；透明度/缩放/颜色使用 `interpolate`
+- 入场位移：小元素 10–20px，大元素 20–40px；避免零位移入场
+- 版式基准：8px 网格为默认，可在 6–10px 之间调整
+- 尺寸用“尺度等级”标注：S / M / L（避免写死单一像素）
+
+## 预设风格模板 (Master Themes)
+
+### A. Elite Dark AI（深度科技感）
+- 适用：AI 模型发布、开发者工具、黑科技展示
+- 色彩体系：
+  - Background: #050505 (Obsidian)
+  - Primary: #8B5CF6 (Vivid Violet)
+  - Accent: #00F5FF (Cyber Cyan)
+  - Text: #F8FAFC
+- 视觉特征：动态网格背景、霓虹流光边框、3D 空间感
+- Spring Config: `{ stiffness: 120, damping: 14, mass: 1 }`（可微调 10–15%）
+
+### B. Glassmorphism SaaS（现代高端感）
+- 适用：办公协作、B2B 产品 Demo、数据分析
+- 色彩体系：
+  - Background: 线性渐变 (135deg, #F1F5F9 0%, #E2E8F0 100%)
+  - Primary: #2563EB (Royal Blue)
+  - Secondary: #6366F1 (Indigo)
+  - Card: rgba(255, 255, 255, 0.6–0.8) + blur(10–16px)
+- 视觉特征：柔和多重阴影、毛玻璃容器、多层景深
+- Spring Config: `{ stiffness: 80, damping: 12, mass: 0.8 }`（可微调 10–15%）
+
+### C. Apple-style Minimalist（极致简洁感）
+- 适用：消费级 AI、创意工具、高端品牌展示
+- 色彩体系：
+  - Background: #FFFFFF 或 #F5F5F7
+  - Primary: #1D1D1F (Jet Black)
+  - Accent: #06C (Classic Blue)
+- 视觉特征：极宽留白、超大粗体字、平滑推近镜头
+- Spring Config: `{ stiffness: 60, damping: 15, mass: 1.2 }`（可微调 10–15%）
+
+## 风格模板
+
+### 产品教程风格
+```yaml
+style:
+  theme: "educational"
+  mood: "清晰、友好、专注"
+
+  colors:
+    primary: "#2563EB"      # 蓝色，信任感
+    secondary: "#10B981"    # 绿色，成功提示
+    background: "#F8FAFC"   # 浅灰背景
+    text: "#1E293B"         # 深色文字
+    accent: "#F59E0B"       # 橙色强调
+
+  typography:
+    title: "PingFang SC Semibold, 48–56px"
+    subtitle: "PingFang SC Medium, 30–36px"
+    body: "PingFang SC Regular, 22–26px"
+    caption: "PingFang SC Light, 16–20px"
+
+  animation:
+    style: "smooth"
+    easing: "ease-in-out"
+    text_in: "8–12"         # 帧
+    text_out: "6–10"
+    transition: "8–12"
+    highlight_duration: "40–60"
+
+  elements:
+    cursor_highlight: true
+    step_numbers: true
+    progress_bar: true
+    hotkey_badges: true
+```
+
+### Demo 演示风格
+```yaml
+style:
+  theme: "showcase"
+  mood: "现代、动感、有冲击力"
+
+  colors:
+    primary: "#8B5CF6"      # 紫色，创新感
+    secondary: "#EC4899"    # 粉色，活跃
+    background: "#0F172A"   # 深色背景
+    text: "#F1F5F9"         # 浅色文字
+    accent: "#22D3EE"       # 青色，科技感
+
+  typography:
+    title: "SF Pro Display Bold, 52–64px"
+    subtitle: "SF Pro Display Medium, 32–40px"
+    body: "SF Pro Text Regular, 22–26px"
+
+  animation:
+    style: "snappy"
+    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+    text_in: "6–10"
+    text_out: "5–8"
+    transition: "6–10"
+    zoom_scale: "1.03–1.08"
+
+  elements:
+    glassmorphism: true
+    gradient_overlays: true
+    particle_effects: "轻量"   # 避免密集
+    screen_mockup: "macbook"
+```
+
+### SaaS 介绍风格
+```yaml
+style:
+  theme: "professional"
+  mood: "可信赖、简洁、高端"
+
+  colors:
+    primary: "#0EA5E9"      # 天蓝，SaaS 感
+    secondary: "#6366F1"    # 靛蓝，专业
+    background: "#FFFFFF"   # 纯白背景
+    text: "#334155"         # 中性灰文字
+    accent: "#F97316"       # 橙色 CTA
+
+  typography:
+    title: "Inter Bold, 48–56px"
+    subtitle: "Inter Semibold, 28–36px"
+    body: "Inter Regular, 20–24px"
+    stats: "Inter Bold, 56–72px"  # 数据展示
+
+  animation:
+    style: "minimal"
+    easing: "ease-out"
+    text_in: "10–14"
+    text_out: "8–12"
+    transition: "10–14"
+    stagger_delay: "2–4"    # 元素依次出现
+
+  elements:
+    logo_watermark: true
+    stats_counter: true
+    testimonial_cards: true
+    cta_button: true
+```
+
+## 场景元素指南
+
+### 片头 (Intro)
+```yaml
+intro:
+  duration: 3–6s
+  elements:
+    - logo_animation
+    - title_text
+    - tagline (可选)
+
+  patterns:
+    tutorial: "Logo 淡入 → 标题滑入 → 副标题"
+    demo: "产品截图缩放 → Logo 叠加 → 标题弹入"
+    saas: "渐变背景 → Logo → 一句话价值主张"
+```
+
+### 功能演示 (Demo Scene)
+```yaml
+demo_scene:
+  elements:
+    - screen_recording       # 主体录屏
+    - cursor_highlight       # 鼠标高亮圈
+    - step_indicator         # 步骤编号
+    - callout_box            # 说明气泡
+    - zoom_focus             # 局部放大
+
+  best_practices:
+    - 录屏居中，预留字幕空间
+    - 鼠标移动平滑、引导明确
+    - 关键操作配合轻微放大
+    - 每步操作后停顿 0.5–1s
+```
+
+### 转场 (Transition)
+```yaml
+transitions:
+  fade:
+    duration: 6–12帧
+    use_for: "温和过渡，段落切换"
+
+  slide:
+    duration: 8–14帧
+    direction: "left" | "right" | "up"
+    use_for: "流程推进，连续叙事"
+
+  zoom:
+    duration: 10–16帧
+    scale: 1.03–1.08
+    use_for: "强调重点，聚焦细节"
+
+  wipe:
+    duration: 8–12帧
+    use_for: "场景切换，时间跳转"
+```
+
+### 片尾 (Outro)
+```yaml
+outro:
+  duration: 5–8s
+  elements:
+    - summary_points
+    - cta_text
+    - cta_button
+    - logo
+    - social_links (可选)
+
+  cta_examples:
+    tutorial: "立刻开始体验"
+    demo: "免费试用"
+    saas: "14 天免费试用"
+```
+
+## 交互与布局要求（必须）
+
+- **布局要有新意**：每次输出必须给出 1 个布局签名（layout_signature），描述明确的构图策略（如分区、对角线切割、层叠卡片、数据墙等）。
+- **交互要有档次**：必须给出 2–3 个交互签名（interaction_signatures），用“动作 + 结果”的方式表达（如“卡片弹入并回弹停留”）。
+- **避免空泛词**：不得只写“高级/大气/科技感”，必须落到具体动作、节奏与视觉结果。
+- **贴合用户需求**：交互与布局必须服务于用户痛点/卖点/场景，非装饰性堆砌。
+
+## 输出格式
+
+```yaml
+style_config:
+  theme: string
+  mood: string
+
+  colors:
+    primary: string
+    secondary: string
+    background: string
+    text: string
+    accent: string
+
+  typography:
+    title: string           # 建议给出范围或等级
+    subtitle: string
+    body: string
+
+  animation:
+    style: "smooth" | "snappy" | "minimal"
+    easing: string
+    text_in: number | range
+    text_out: number | range
+    transition: number | range
+
+  elements:
+    layout_signature: string           # 必须：一句话布局策略
+    interaction_signatures: string[]   # 必须：2-3条交互签名
+    intro: object
+    demo_scene: object
+    transitions: string[]
+    outro: object
+
+  brand:
+    logo_path: "path"       # 可选
+    brand_colors: string[]   # 可选
+    font_family: string      # 可选
+```
+
+## 风格一致性检查清单
+- [ ] 全片配色统一（不超过 5 种颜色）
+- [ ] 字体层级清晰（标题 / 副标题 / 正文）
+- [ ] 动画节奏一致（同类元素时长一致）
+- [ ] 转场风格统一（避免混用太多）
+- [ ] 元素间距规范（以 8px 网格为基准）
+- [ ] 录屏画质一致（分辨率 / 帧率一致）
+- [ ] 音频响度统一（配音约 -16dB，BGM 约 -26dB）
+
+## 扩展参考资料（references/）
+
+- audience-and-scenarios.md：受众与场景定位
+- visual-style-system.md：视觉风格系统（Advanced Aesthetics）
+- motion-grammar.md：动效语法 + 真实交互
+- scene-recipes.md：分段结构配方（15/30/45/60s）
+- interaction-innovation.md：新奇交互与视觉冲击
+- quality-checklist.md：成片质量检查
+
+使用顺序建议：受众定位 → 风格系统 → 场景配方 → 动效语法 → 创新交互 → 质量检查。