步骤 2：检索 Stitch 项目信息

1. 项目查找（如果未提供项目 ID）：

   • 调用 [stitch_prefix]:list_projects 并附带 filter: "view=owned"
   • 通过标题识别目标项目（例如，"Calculator App"）
   • 从 name 字段提取项目 ID（例如，projects/13534454087919359824）

2. 屏幕检索：

   • 使用项目 ID（仅数字）调用 [stitch_prefix]:list_screens
   • 查看屏幕标题以识别演练所需的所有屏幕
   • 从每个屏幕的 name 字段提取屏幕 ID

3. 屏幕元数据获取：对于每个屏幕：

   • 使用 projectId 和 screenId 调用 [stitch_prefix]:get_screen
   • 检索：
     • screenshot.downloadUrl — 视频的视觉资源
     • htmlCode.downloadUrl — 可选：用于提取文本/内容
     • width, height — 用于正确缩放的屏幕尺寸
     • 用于文本叠加的屏幕标题和描述

4. 资源下载：

   • 使用 web_fetch 或带 curl 的 Bash 下载屏幕截图
   • 保存到暂存目录：assets/screens/{screen-name}.png
   • 按预期演练流程的顺序组织资源

步骤 3：设置 Remotion 项目

1. 检查现有的 Remotion 项目：

   • 查找 remotion.config.ts 或包含 Remotion 依赖项的 package.json
   • 如果存在，使用现有的项目结构

2. 创建新的 Remotion 项目（如果需要）：

   npm create video@latest -- --blank
   

   • 选择 TypeScript 模板
   • 在专用的 video/ 目录中设置

3. 安装依赖项：

   cd video
   npm install @remotion/transitions @remotion/animated-emoji
   

视频合成策略

架构

使用以下组件创建模块化的 Remotion 合成：

1. ScreenSlide.tsx — 单个屏幕显示组件

   • 属性：imageSrc, title, description, width, height
   • 功能：缩放动画、淡入淡出转场
   • 时长：可配置（默认每个屏幕 3-5 秒）

2. WalkthroughComposition.tsx — 主视频合成

   • 序列化多个 ScreenSlide 组件
   • 处理屏幕间的转场
   • 添加文本叠加和注释

3. config.ts — 视频配置

   • 帧率（默认：30 fps）
   • 视频尺寸（匹配 Stitch 屏幕尺寸或适当缩放）
   • 总时长计算

转场效果

使用 Remotion 的 @remotion/transitions 实现专业效果：

• 淡入淡出：屏幕间的平滑交叉淡入淡出

  import {fade} from '@remotion/transitions/fade';
  

• 滑动：定向滑动转场

  import {slide} from '@remotion/transitions/slide';
  

• 缩放：用于强调的放大/缩小效果

  • 使用 spring() 动画实现平滑缩放
  • 应用于重要的 UI 元素

文本叠加

使用 Remotion 的文本渲染添加上下文信息：

1. 屏幕标题：显示在每帧的顶部或底部
2. 功能标注：用动画指针突出显示特定的 UI 元素
3. 描述：为每个屏幕淡入描述性文本
4. 进度指示器：显示演练中的当前屏幕位置

执行步骤

步骤 1：收集屏幕资源

1. 识别目标 Stitch 项目
2. 列出项目中的所有屏幕
3. 下载每个屏幕的截图
4. 按演练流程顺序组织
5. 创建清单文件 (screens.json)：

{

  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Home Screen",
      "description": "Main calculator interface with number pad",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "History View",
      "description": "View of previous calculations",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

步骤 2：生成 Remotion 组件

遵循 Remotion 最佳实践创建视频组件：

1. 创建 ScreenSlide.tsx：

   • 使用 useCurrentFrame() 和 spring() 实现动画
   • 实现缩放和淡入淡出效果
   • 添加具有适当时机的文本叠加

2. 创建 WalkthroughComposition.tsx：

   • 导入屏幕清单
   • 使用 <Sequence> 组件序列化屏幕
   • 在屏幕间应用转场
   • 计算正确的时机和偏移量

3. 更新 remotion.config.ts：

   • 设置合成 ID
   • 配置视频尺寸
   • 设置帧率和时长

参考资源：

• 使用 resources/screen-slide-template.tsx 作为起点
• 遵循 resources/composition-checklist.md 以确保完整性
• 查看 examples/walkthrough/ 目录中的示例

步骤 3：预览和优化

1. 启动 Remotion Studio：

   npm run dev
   

   • 打开基于浏览器的预览
   • 允许实时编辑和优化

2. 调整时机：

   • 确保每个屏幕有适当的显示时长
   • 验证转场是否平滑
   • 检查文本叠加的时机

3. 微调动画：

   • 调整缩放效果的弹簧配置
   • 修改转场的缓动函数
   • 确保文本始终可读

步骤 4：渲染视频

1. 使用 Remotion CLI 渲染：

   npx remotion render WalkthroughComposition output.mp4
   

2. 替代方案：使用 Remotion MCP（如果可用）：

   • 使用合成详细信息调用 [remotion_prefix]:render
   • 指定输出格式（MP4、WebM 等）

3. 优化选项：

   • 设置质量级别 (--quality)
   • 配置编解码器 (--codec h264 或 h265)
   • 启用并行渲染 (--concurrency)

高级功能

交互式热点

突出显示可点击元素或重要功能：

import {interpolate, useCurrentFrame} from 'remotion';

const Hotspot = ({x, y, label}) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {damping: 10, stiffness: 100}
  });
  
  return (
    <div style={{
      position: 'absolute',
      left: x,
      top: y,
      transform: `scale(${scale})`
    }}>
      <div className="pulse-ring" />
      <span>{label}</span>
    </div>
  );
};

画外音集成

为演练添加旁白：

1. 根据屏幕描述生成画外音脚本
2. 使用文本转语音或录制音频
3. 使用 <Audio> 组件将音频导入 Remotion
4. 使屏幕时机与画外音节奏同步

动态文本提取

从 Stitch HTML 代码中提取文本以进行自动注释：

1. 为每个屏幕下载 htmlCode.downloadUrl
2. 解析 HTML 以提取关键文本元素（标题、按钮、标签）
3. 为重要的 UI 元素生成自动标注
4. 作为定时文本叠加添加到合成中

文件结构

project/
├── video/                      # Remotion 项目目录
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # 下载的 Stitch 屏幕截图
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # 屏幕清单
└── output.mp4                  # 渲染的视频

与 Remotion Skills 集成

Remotion 维护其自己的 Agent Skills，定义了最佳实践。请查看这些内容以获取高级技术：

• 仓库：https://github.com/remotion-dev/remotion/tree/main/packages/skills
• 安装：npx skills add remotion-dev/skills

可借鉴的关键 Remotion 技能：

• 动画时机和缓动
• 合成架构模式
• 性能优化
• 音频同步

常见模式

模式 1：简单幻灯片放映

带有淡入淡出转场的基本演练：

• 每个屏幕 3-5 秒
• 交叉淡入淡出转场
• 底部带有屏幕标题的文本叠加
• 顶部进度条

模式 2：功能突出显示

专注于特定的 UI 元素：

• 放大到特定区域
• 指向功能的动画圆圈/箭头
• 关键交互的慢动作强调
• 并排的前后对比

模式 3：用户流程

展示逐步的用户旅程：

• 带有定向滑动的顺序屏幕流程
• 带编号的步骤叠加
• 突出显示用户操作（点击、轻触）
• 用动画路径连接屏幕

故障排除

最佳实践

1. 保持宽高比：使用实际的 Stitch 屏幕尺寸或按比例缩放
2. 一致的时机：除非强调特定屏幕，否则保持屏幕显示时长一致
3. 可读的文本：确保足够的对比度；使用适当的字体大小；避免杂乱的叠加层
4. 平滑的转场：使用弹簧动画实现自然运动；避免生硬的切换
5. 彻底预览：在最终渲染前始终在 Remotion Studio 中预览
6. 优化资源：适当压缩图像；使用高效格式（UI 用 PNG，照片用 JPG）

使用示例

用户提示：

Look up the screens in my Stitch project "Calculator App" and build a remotion video 
that shows a walkthrough of the screens.

Agent 工作流程：

1. 列出 Stitch 项目 → 找到 "Calculator App" → 提取项目 ID
2. 列出项目中的屏幕 → 识别所有屏幕（主页、历史记录、设置）
3. 下载每个屏幕的截图 → 保存到 assets/screens/
4. 使用屏幕元数据创建 screens.json 清单
5. 生成 Remotion 组件 (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. 在 Remotion Studio 中预览 → 优化时机和转场
7. 渲染最终视频 → calculator-walkthrough.mp4
8. 报告完成情况并附上视频预览链接

成功秘诀

• 从简单开始：在添加复杂动画之前，先从基本的淡入淡出转场开始
• 遵循 Remotion 模式：利用 Remotion 的官方技能和文档
• 使用清单文件：将屏幕数据组织在 JSON 中以便于更新
• 频繁预览：使用 Remotion Studio 及早发现问题
• 考虑可访问性：添加字幕；确保文本可读；使用清晰的视觉效果
• 针对平台优化：使视频尺寸与目标平台（YouTube、社交媒体等）匹配

参考

• Stitch 文档：https://stitch.withgoogle.com/docs/
• Remotion 文档：https://www.remotion.dev/docs/
• Remotion Skills：https://www.remotion.dev/docs/ai/skills
• Remotion MCP：https://www.remotion.dev/docs/ai/mcp
• Remotion Transitions：https://www.remotion.dev/docs/transitions

每周安装数

1

仓库

codereaper1/sti…h-skills

首次出现

今天

安全审计

Gen Agent Trust HubPassSocketPassSnykWarn

安装于

zencoder1

amp1

cline1

openclaw1

opencode1

cursor1

Step 2: Retrieve Stitch Project Information

1. Project lookup (if Project ID is not provided):

   • Call [stitch_prefix]:list_projects with filter: "view=owned"
   • Identify target project by title (e.g., "Calculator App")
   • Extract Project ID from name field (e.g., projects/13534454087919359824)

2. Screen retrieval :

   • Call [stitch_prefix]:list_screens with the project ID (numeric only)
   • Review screen titles to identify all screens for the walkthrough
   • Extract Screen IDs from each screen's name field

3. Screen metadata fetch : For each screen:

   • Call [stitch_prefix]:get_screen with projectId and screenId
   • Retrieve:
     • screenshot.downloadUrl — Visual asset for the video
     • htmlCode.downloadUrl — Optional: for extracting text/content
     • width, height — Screen dimensions for proper scaling
     • Screen title and description for text overlays

4. Asset download :

   • Use web_fetch or Bash with curl to download screenshots
   • Save to a staging directory: assets/screens/{screen-name}.png
   • Organize assets in order of the intended walkthrough flow

Step 3: Set Up Remotion Project

1. Check for existing Remotion project :

   • Look for remotion.config.ts or package.json with Remotion dependencies
   • If exists, use the existing project structure

2. Create new Remotion project (if needed):

   npm create video@latest -- --blank
   

   • Choose TypeScript template
   • Set up in a dedicated video/ directory

3. Install dependencies :

   cd video
   npm install @remotion/transitions @remotion/animated-emoji
   

Video Composition Strategy

Architecture

Create a modular Remotion composition with these components:

1. ScreenSlide.tsx — Individual screen display component

   • Props: imageSrc, title, description, width, height
   • Features: Zoom-in animation, fade transitions
   • Duration: Configurable (default 3-5 seconds per screen)

2. WalkthroughComposition.tsx — Main video composition

   • Sequences multiple ScreenSlide components
   • Handles transitions between screens
   • Adds text overlays and annotations

3. config.ts — Video configuration

   • Frame rate (default: 30 fps)
   • Video dimensions (match Stitch screen dimensions or scale appropriately)
   • Total duration calculation

Transition Effects

Use Remotion's @remotion/transitions for professional effects:

• Fade : Smooth cross-fade between screens

  import {fade} from '@remotion/transitions/fade';
  

• Slide : Directional slide transitions

  import {slide} from '@remotion/transitions/slide';
  

• Zoom : Zoom in/out effects for emphasis

  • Use spring() animation for smooth zoom
  • Apply to important UI elements

Text Overlays

Add contextual information using Remotion's text rendering:

1. Screen titles : Display at the top or bottom of each frame
2. Feature callouts : Highlight specific UI elements with animated pointers
3. Descriptions : Fade in descriptive text for each screen
4. Progress indicator : Show current screen position in walkthrough

Execution Steps

Step 1: Gather Screen Assets

1. Identify target Stitch project
2. List all screens in the project
3. Download screenshots for each screen
4. Organize in order of walkthrough flow
5. Create a manifest file (screens.json):

{

  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Home Screen",
      "description": "Main calculator interface with number pad",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "History View",
      "description": "View of previous calculations",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Step 2: Generate Remotion Components

Create the video components following Remotion best practices:

1. CreateScreenSlide.tsx:

   • Use useCurrentFrame() and spring() for animations
   • Implement zoom and fade effects
   • Add text overlays with proper timing

2. CreateWalkthroughComposition.tsx:

   • Import screen manifest
   • Sequence screens with <Sequence> components
   • Apply transitions between screens
   • Calculate proper timing and offsets

3. Updateremotion.config.ts:

   • Set composition ID
   • Configure video dimensions
   • Set frame rate and duration

Reference Resources:

• Use resources/screen-slide-template.tsx as starting point
• Follow resources/composition-checklist.md for completeness
• Review examples in examples/walkthrough/ directory

Step 3: Preview and Refine

1. Start Remotion Studio :

   npm run dev
   

   • Opens browser-based preview
   • Allows real-time editing and refinement

2. Adjust timing :

   • Ensure each screen has appropriate display duration
   • Verify transitions are smooth
   • Check text overlay timing

3. Fine-tune animations :

   • Adjust spring configurations for zoom effects
   • Modify easing functions for transitions
   • Ensure text is readable at all times

Step 4: Render Video

1. Render using Remotion CLI :

   npx remotion render WalkthroughComposition output.mp4
   

2. Alternative: Use Remotion MCP (if available):

   • Call [remotion_prefix]:render with composition details
   • Specify output format (MP4, WebM, etc.)

3. Optimization options :

   • Set quality level (--quality)
   • Configure codec (--codec h264 or h265)
   • Enable parallel rendering (--concurrency)

Advanced Features

Interactive Hotspots

Highlight clickable elements or important features:

import {interpolate, useCurrentFrame} from 'remotion';

const Hotspot = ({x, y, label}) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {damping: 10, stiffness: 100}
  });
  
  return (
    <div style={{
      position: 'absolute',
      left: x,
      top: y,
      transform: `scale(${scale})`
    }}>
      <div className="pulse-ring" />
      <span>{label}</span>
    </div>
  );
};

Voiceover Integration

Add narration to the walkthrough:

1. Generate voiceover script from screen descriptions
2. Use text-to-speech or record audio
3. Import audio into Remotion with <Audio> component
4. Sync screen timing with voiceover pacing

Dynamic Text Extraction

Extract text from Stitch HTML code for automatic annotations:

1. Download htmlCode.downloadUrl for each screen
2. Parse HTML to extract key text elements (headings, buttons, labels)
3. Generate automatic callouts for important UI elements
4. Add to composition as timed text overlays

File Structure

project/
├── video/                      # Remotion project directory
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Downloaded Stitch screenshots
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Screen manifest
└── output.mp4                  # Rendered video

Integration with Remotion Skills

Remotion maintains its own Agent Skills that define best practices. Review these for advanced techniques:

• Repository : https://github.com/remotion-dev/remotion/tree/main/packages/skills
• Installation : npx skills add remotion-dev/skills

Key Remotion skills to leverage:

• Animation timing and easing
• Composition architecture patterns
• Performance optimization
• Audio synchronization

Common Patterns

Pattern 1: Simple Slide Show

Basic walkthrough with fade transitions:

• 3-5 seconds per screen
• Cross-fade transitions
• Bottom text overlay with screen title
• Progress bar at top

Pattern 2: Feature Highlight

Focus on specific UI elements:

• Zoom into specific regions
• Animated circles/arrows pointing to features
• Slow-motion emphasis on key interactions
• Side-by-side before/after comparisons

Pattern 3: User Flow

Show step-by-step user journey:

• Sequential screen flow with directional slides
• Numbered steps overlay
• Highlight user actions (clicks, taps)
• Connect screens with animated paths

Troubleshooting

Best Practices

1. Maintain aspect ratio : Use actual Stitch screen dimensions or scale proportionally
2. Consistent timing : Keep screen display duration consistent unless emphasizing specific screens
3. Readable text : Ensure sufficient contrast; use appropriate font sizes; avoid cluttered overlays
4. Smooth transitions : Use spring animations for natural motion; avoid jarring cuts
5. Preview thoroughly : Always preview in Remotion Studio before final render
6. Optimize assets : Compress images appropriately; use efficient formats (PNG for UI, JPG for photos)

Example Usage

User prompt:

Look up the screens in my Stitch project "Calculator App" and build a remotion video 
that shows a walkthrough of the screens.

Agent workflow:

1. List Stitch projects → Find "Calculator App" → Extract project ID
2. List screens in project → Identify all screens (Home, History, Settings)
3. Download screenshots for each screen → Save to assets/screens/
4. Create screens.json manifest with screen metadata
5. Generate Remotion components (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Preview in Remotion Studio → Refine timing and transitions
7. Render final video → calculator-walkthrough.mp4
8. Report completion with video preview link

Tips for Success

• Start simple : Begin with basic fade transitions before adding complex animations
• Follow Remotion patterns : Leverage Remotion's official skills and documentation
• Use manifest files : Keep screen data organized in JSON for easy updates
• Preview frequently : Use Remotion Studio to catch issues early
• Consider accessibility : Add captions; ensure text is readable; use clear visuals
• Optimize for platform : Match video dimensions to target platform (YouTube, social media, etc.)

References

• Stitch Documentation : https://stitch.withgoogle.com/docs/
• Remotion Documentation : https://www.remotion.dev/docs/
• Remotion Skills : https://www.remotion.dev/docs/ai/skills
• Remotion MCP : https://www.remotion.dev/docs/ai/mcp
• Remotion Transitions : https://www.remotion.dev/docs/transitions

Weekly Installs

1

Repository

codereaper1/sti…h-skills

First Seen

Today

Security Audits

Gen Agent Trust HubPassSocketPassSnykWarn

Installed on

zencoder1

amp1

cline1

openclaw1

opencode1

cursor1