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