Media Composition

## Table of Contents

- [Overview](#overview)
- [Required TodoWrite Items](#required-todowrite-items)
- [Manifest Format](#manifest-format)
- [Manifest Schema](#manifest-schema)
- [Step-by-Step Process](#step-by-step-process)
- [1. Parse Manifest File](#1-parse-manifest-file)
- [2. Validate Component Outputs](#2-validate-component-outputs)
- [3. Execute FFmpeg Composition](#3-execute-ffmpeg-composition)
- [4. Verify Combined Output](#4-verify-combined-output)
- [FFmpeg Composition Commands](#ffmpeg-composition-commands)
- [Vertical Stacking](#vertical-stacking)
- [Horizontal Stacking](#horizontal-stacking)
- [Sequential Concatenation](#sequential-concatenation)
- [Grid Layout (2x2)](#grid-layout-(2x2))
- [With Background Color](#with-background-color)
- [Layout Options](#layout-options)
- [Layout Option Details](#layout-option-details)
- [Example Compositions](#example-compositions)
- [Terminal + Browser Tutorial](#terminal-+-browser-tutorial)
- [Side-by-Side Comparison](#side-by-side-comparison)
- [Picture-in-Picture](#picture-in-picture)
- [Exit Criteria](#exit-criteria)


# Media Composition Skill

Combine multiple media assets (GIFs, videos, images) into composite outputs for detailed tutorials and documentation.


## When To Use

- Combining multiple media outputs into compositions
- Creating composite demos from terminal and browser recordings

## When NOT To Use

- Single-format output that does not need composition
- Simple terminal recordings - use scry:vhs-recording directly

## Overview

This skill orchestrates the combination of separately generated media assets into unified outputs. It reads manifest files that define components and their composition rules, validates all inputs exist, and executes FFmpeg commands to produce the final composite media.

## Required TodoWrite Items

```
- Parse composition manifest file
- Validate all component outputs exist
- Determine composition layout and parameters
- Execute FFmpeg composition command
- Verify combined output file created
- Report composition metrics (file size, dimensions)
```
**Verification:** Run the command with `--help` flag to verify availability.

## Manifest Format

Manifests define the components to combine and how to arrange them:

```yaml
# Example manifest: tutorials/mcp.manifest.yaml
name: mcp
title: "MCP Server Integration"
components:
  - type: tape
    source: mcp.tape
    output: assets/gifs/mcp-terminal.gif
  - type: playwright
    source: browser/mcp-browser.spec.ts
    output: assets/gifs/mcp-browser.gif
    requires:
      - "skrills serve"
combine:
  output: assets/gifs/mcp-combined.gif
  layout: vertical
  options:
    padding: 10
    background: "#1a1a2e"
```
**Verification:** Run the command with `--help` flag to verify availability.

### Manifest Schema

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `name` | string | Yes | Identifier for the composition |
| `title` | string | No | Human-readable title |
| `components` | array | Yes | List of media components to combine |
| `components[].type` | string | Yes | Source type: `tape`, `playwright`, `static` |
| `components[].source` | string | Yes | Path to source file |
| `components[].output` | string | Yes | Path to generated output |
| `components[].requires` | array | No | Commands to run before generation |
| `combine.output` | string | Yes | Path for combined output |
| `combine.layout` | string | Yes | Layout mode (see table below) |
| `combine.options` | object | No | Layout-specific options |

## Step-by-St