Combine media assets (GIFs, videos) into composite tutorials with vertical/horizontal layouts.
Combines multiple GIFs and videos into composite tutorials using vertical, horizontal, or grid layouts.
/plugin marketplace add athola/claude-night-market/plugin install scry@claude-night-marketThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Combine multiple media assets (GIFs, videos, images) into composite outputs for detailed tutorials and documentation.
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.
- 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.
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: 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.
| 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
Verification: Run the command with --help flag to verify availability.
# 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
Verification: Run the command with --help flag to verify availability.
Based on the layout specified in the manifest, execute the appropriate FFmpeg command.
# 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
Verification: Run the command with --help flag to verify availability.
Stack GIFs/videos top to bottom:
ffmpeg -i top.gif -i bottom.gif \
-filter_complex "[0:v][1:v]vstack=inputs=2" \
-y output.gif
Verification: Run the command with --help flag to verify availability.
With padding between:
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
Verification: Run the command with --help flag to verify availability.
Stack GIFs/videos side by side:
ffmpeg -i left.gif -i right.gif \
-filter_complex "[0:v][1:v]hstack=inputs=2" \
-y output.gif
Verification: Run the command with --help flag to verify availability.
Play GIFs/videos one after another:
# 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
Verification: Run the command with --help flag to verify availability.
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
Verification: Run the command with --help flag to verify availability.
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
Verification: Run the command with --help flag to verify availability.
| 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"
Verification: Run the command with --help flag to verify availability.
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
Verification: Run the command with --help flag to verify availability.
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
Verification: Run the command with --help flag to verify availability.
Command not found Ensure all dependencies are installed and in PATH
Permission errors Check file permissions and run with appropriate privileges
Unexpected behavior
Enable verbose logging with --verbose flag
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.