Can I customize the layout of the combined media?

Yes, you can choose from vertical, horizontal, grid, sequential, and picture-in-picture layouts with custom padding, background colors, and alignment options.

Does this skill have any dependencies?

Yes, it depends on the scry:gif-generation skill to ensure that the individual media components are correctly generated before composition.

Is it possible to automate the entire tutorial creation process?

Yes, by combining this with browser automation and terminal recording skills, Claude can generate the source assets and then compose them into a final tutorial automatically.

Do I need to know FFmpeg commands to use this skill?

No, the skill abstracts complex FFmpeg commands into a simple YAML manifest format, though it executes FFmpeg under the hood to perform the work.

What file formats does the Media Composition skill support?

It primarily supports common web media formats like GIFs and videos (e.g., MP4) that can be processed by FFmpeg.

Media Composition

Name: Media Composition
Author: micsapp

bymicsapp

0•

Learning & Documentation

Combines multiple GIFs, videos, and images into structured composite layouts for professional documentation and tutorials.

The Media Composition skill automates the creation of complex visual demonstrations by stitching together separate terminal recordings, browser automation clips, and static images. By utilizing a YAML manifest system, it orchestrates FFmpeg to generate vertical stacks, horizontal comparisons, grid layouts, or picture-in-picture outputs, making it an essential tool for developers and technical writers who need to produce high-quality, synchronized visual guides without manual video editing.

Key Features

01Multi-asset stitching for GIFs, videos, and static images

02Sequential concatenation for creating multi-step video tutorials

03Customizable styling with padding, background colors, and alignment

04Flexible layout modes including Vertical, Horizontal, Grid, and PiP

05YAML manifest-driven orchestration for repeatable media builds

060 GitHub stars

Use Cases

01Generating picture-in-picture clips to highlight specific UI interactions

02Creating side-by-side terminal and browser comparison demos

03Building multi-step sequential video tutorials for technical documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills media-composition

For use in Claude.ai and ChatGPT

Key Features

01Multi-asset stitching for GIFs, videos, and static images

02Sequential concatenation for creating multi-step video tutorials

03Customizable styling with padding, background colors, and alignment

04Flexible layout modes including Vertical, Horizontal, Grid, and PiP

05YAML manifest-driven orchestration for repeatable media builds

060 GitHub stars

Use Cases

01Generating picture-in-picture clips to highlight specific UI interactions

02Creating side-by-side terminal and browser comparison demos

03Building multi-step sequential video tutorials for technical documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills media-composition

For use in Claude.ai and ChatGPT