Table of Contents

• Overview
• Required TodoWrite Items
• Process
• Step 1: Validate Input File
• Step 2: Check ffmpeg Installation
• Step 3: Execute Conversion
• Basic Conversion (Fast, Larger File)
• High Quality with Palette Generation (Recommended)
• Maximum Quality with Dithering
• Optimization Options
• Common Presets
• Step 4: Verify Output
• Exit Criteria
• Troubleshooting
• Large Output File
• Color Banding
• Slow Conversion

GIF Generation Skill

Post-process video files (webm/mp4) and generate optimized GIF output with configurable quality settings.

Overview

This skill handles the conversion of video recordings (typically from browser automation) to GIF format. It provides multiple quality presets and optimization options to balance file size with visual quality.

Required TodoWrite Items

- Validate input video file exists
- Check ffmpeg installation
- Execute GIF conversion
- Verify output and report results

Verification: Run the command with

--help

Process

Step 1: Validate Input File

Confirm the source video file exists and is a supported format:

# Check file exists and get info
if [[ -f "$INPUT_FILE" ]]; then
    file "$INPUT_FILE"
    ffprobe -v quiet -show_format -show_streams "$INPUT_FILE" 2>/dev/null | head -20
else
    echo "Error: Input file not found: $INPUT_FILE"
    exit 1
fi

Verification: Run the command with

--help

Supported input formats:

.webm

.mp4

.mov

.avi

Step 2: Check ffmpeg Installation

Verify ffmpeg is available:

if ! command -v ffmpeg &> /dev/null; then
    echo "Error: ffmpeg is not installed"
    echo "Install with: sudo apt install ffmpeg (Linux) or brew install ffmpeg (macOS)"
    exit 1
fi
ffmpeg -version | head -1

Verification: Run the command with

--help

Step 3: Execute Conversion

Choose the appropriate conversion command based on quality requirements:

Basic Conversion (Fast, Larger File)

ffmpeg -i input.webm -vf "fps=10,scale=800:-1" output.gif

Verification: Run the command with

--help

High Quality with Palette Generation (Recommended)

ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" output.gif

Verification: Run the command with

--help

Maximum Quality with Dithering

ffmpeg -i input.webm -vf "fps=15,scale=1024:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=256:stats_mode=single[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" output.gif

Verification: Run the command with

--help

Optimization Options

fps

scale

flags=lanczos

palettegen

dither

bayer

floyd_steinberg

Common Presets

# Thumbnail (small, fast loading)
ffmpeg -i input.webm -vf "fps=8,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" thumbnail.gif

# Documentation (balanced)
ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" docs.gif

# High-fidelity demo
ffmpeg -i input.webm -vf "fps=15,scale=1024:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=256[p];[s1][p]paletteuse" demo.gif

Verification: Run the command with

--help

Step 4: Verify Output

Confirm successful conversion and report metrics:

if [[ -f "$OUTPUT_FILE" ]]; then
    echo "GIF generated successfully: $OUTPUT_FILE"

    # Report file size
    SIZE=$(du -h "$OUTPUT_FILE" | cut -f1)
    echo "File size: $SIZE"

    # Get dimensions and frame count
    ffprobe -v quiet -select_streams v:0 -show_entries stream=width,height,nb_frames -of csv=p=0 "$OUTPUT_FILE"
else
    echo "Error: GIF generation failed"
    exit 1
fi

Verification: Run the command with

--help

Exit Criteria

• Input file validated as existing video format
• ffmpeg confirmed available
• GIF file created at specified output path
• Output file size reported to user
• No ffmpeg errors during conversion

Troubleshooting

Large Output File

Reduce quality settings:

# Lower fps and resolution
ffmpeg -i input.webm -vf "fps=8,scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" smaller.gif

Verification: Run the command with

--help

Color Banding

Use dithering:

ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse=dither=floyd_steinberg" smooth.gif

Verification: Run the command with

--help

Slow Conversion

Use basic conversion without palette generation for speed:

ffmpeg -i input.webm -vf "fps=10,scale=800:-1" quick.gif

Verification: Run the command with

--help