media-composition

Combines GIFs and videos into composite tutorials with vertical or grid layouts via ffmpeg. Use when assembling multi-part media into a single output.

仓库: athola/claude-night-market
最近来源活动: 2026年6月25日 23:55
检测到的 SKILL.md 语言: 英语
星标: 327
分支: 35

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

返回搜索返回安装

name	media-composition
description	Combines GIFs and videos into composite tutorials with vertical or grid layouts via ffmpeg. Use when assembling multi-part media into a single output.
alwaysApply	false
category	media-generation
tags	["composition","ffmpeg","media","combine","stitch","tutorial"]
tools	[]
complexity	medium
model_hint	standard
estimated_tokens	450
progressive_loading	false
dependencies	["scry:gif-generation"]

Table of Contents

Overview
Prerequisites
Required TodoWrite Items
Manifest Format
Manifest Schema
Step-by-Step Process
FFmpeg Composition Commands
Layout Options
Example Compositions
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.

Prerequisites

The following tools must be available on PATH before using this skill:

ffmpeg: media composition and encoding
yq: YAML manifest parsing

Run ffmpeg -version and yq --version to verify availability.

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)

Manifest Format

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

# Example manifest: tutorials/mcp.manifest.yaml
name: mcp
title: "MCP Server Integration"
components:
  - type:

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

# Read and validate manifest structure
yq eval '.' manifest.yaml

# Extract component outputs
yq eval '.components[].output' manifest.yaml

# Check all required files exist
for output in $(yq eval '.components[].output' manifest.yaml); do
  if [[ ! -f "$output" ]]; then
    echo "ERROR: Missing component: $output"
    exit 1
  fi
done

# Verify output exists and has content
if [[ -f "$output" && -s "$output" ]]; then
  echo "Composition successful: $output"
  ls -lh "$output"
else
  echo "ERROR: Composition failed"
  exit 1
fi

ffmpeg -i top.gif -i bottom.gif \
  -filter_complex "[0:v][1:v]vstack=inputs=2" \
  -y output.gif

ffmpeg -i top.gif -i bottom.gif \
  -filter_complex "[0:v]pad=iw:ih+10:0:0:color=black[top];[top][1:v]vstack=inputs=2" \
  -y output.gif

ffmpeg -i left.gif -i right.gif \
  -filter_complex "[0:v][1:v]hstack=inputs=2" \
  -y output.gif

# Create concat list file
cat > concat_list.txt << EOF
file 'first.gif'
file 'second.gif'
file 'third.gif'
EOF

# Concatenate
ffmpeg -f concat -safe 0 -i concat_list.txt \
  -y output.gif

ffmpeg -i tl.gif -i tr.gif -i bl.gif -i br.gif \
  -filter_complex "[0:v][1:v]hstack=inputs=2[top];[2:v][3:v]hstack=inputs=2[bottom];[top][bottom]vstack=inputs=2" \
  -y output.gif

ffmpeg -i top.gif -i bottom.gif \
  -filter_complex "color=c=#1a1a2e:s=800x600[bg];[bg][0:v]overlay=0:0[tmp];[tmp][1:v]overlay=0:300" \
  -y output.gif

Layout	Description	Options
`vertical`	Stack top to bottom	`padding`, `background`, `align`
`horizontal`	Stack left to right	`padding`, `background`, `align`
`sequential`	Play in order	`transition`, `duration`
`grid`	N x M grid arrangement	`rows`, `cols`, `padding`
`overlay`	Layer on top of each other	`position`, `opacity`
`pip`	Picture-in-picture	`corner`, `scale`, `margin`

Option	Type	Default	Description
`padding`	int	0	Pixels between components
`background`	string	"black"	Background color (hex or name)
`align`	string	"center"	Alignment: left, center, right
`transition`	string	"none"	Transition type: fade, wipe, none
`scale`	float	0.25	Scale factor for PiP
`corner`	string	"br"	PiP corner: tl, tr, bl, br

name: plugin-demo
components:
  - type: tape
    source: demo.tape
    output: terminal.gif
  - type: playwright
    source: browser.spec.ts
    output: browser.gif
combine:
  output: demo-combined.gif
  layout: vertical
  options:
    padding: 5
    background: "#0d1117"

name: before-after
components:
  - type: static
    source: before.gif
    output: before.gif
  - type: static
    source: after.gif
    output: after.gif
combine:
  output: comparison.gif
  layout: horizontal
  options:
    padding: 10

name: pip-demo
components:
  - type: tape
    source: main.tape
    output: main.gif
  - type: playwright
    source: overlay.spec.ts
    output: overlay.gif
combine:
  output: pip-demo.gif
  layout: pip
  options:
    corner: br
    scale: 0.3
    margin: 20