Video Comparer

A professional video comparison tool that analyzes compression quality and generates interactive HTML reports. Compare original vs compressed videos with detailed metrics (PSNR, SSIM) and frame-by-frame visual comparisons.

Features

🎯 Video Analysis

Metadata Extraction: Codec, resolution, frame rate, bitrate, duration, file size
Quality Metrics: PSNR (Peak Signal-to-Noise Ratio) and SSIM (Structural Similarity Index)
Compression Analysis: Size and bitrate reduction percentages

🖼️ Interactive Comparison

Three Viewing Modes:
- Slider Mode: Interactive before/after slider using img-comparison-slider
- Side-by-Side Mode: Simultaneous display of both frames
- Grid Mode: Compact 2-column layout
Zoom Controls: 50%-200% zoom with real image dimension scaling
Responsive Design: Works on desktop, tablet, and mobile

🔒 Security & Reliability

Path Validation: Prevents directory traversal attacks
**C

Code Examples

README.md

# Skill Demonstrations

This directory contains automated demonstrations of each skill using [VHS (Video Home System)](https://github.com/charmbracelet/vhs) by Charmbracelet.

VHS allows you to write terminal recordings as code, making demos reproducible, version-controllable, and typo-free.

## 📁 Demo Structure

demos/ ├── skill-creator/ │ ├── init-skill.tape # Initialize a new skill │ ├── validate-skill.tape # Validate skill quality │ └── package-skill.tape # Package for distribution ├── github-ops/ │ └── create-pr.tape # Create pull requests ├── markdown-tools/ │ └── convert-docs.tape # Convert documents └── generate_all_demos.sh # Generate all GIFs


## 🎬 Generating Demos

### Prerequisites

Install VHS:

**macOS:**
```bash
brew install vhs

Linux (with Go):

go install github.com/charmbracelet/vhs@latest

Or download from: https://github.com/charmbracelet/vhs/releases

Generate All Demos


### generate_all_demos.sh

#!/bin/bash set -e

echo "================================================" echo "Generating Claude Code Skills Demo GIFs" echo "================================================" echo ""

Colors for output

GREEN='\033[0;32m' YELLOW='\033[1;33m' RED='\033[0;31m' NC='\033[0m' # No Color

Check if VHS is installed

if ! command -v vhs &> /dev/null; then echo -e "${RED}Error: VHS is not installed!${NC}" echo "" echo "Install VHS to generate demo GIFs:" echo "" echo "macOS:" echo " brew install vhs" echo "" echo "Linux (with Go):" echo " go install github.com/charmbracelet/vhs@latest" echo "" echo "Or download from: https://github.com/charmbracelet/vhs/releases" echo "" exit 1 fi

echo -e "${GREEN}✓ VHS found${NC}" echo ""

Find all .tape files

TAPE_FILES=$(find demos -name "*.tape" -type f | sort) TOTAL=$(echo "$TAPE_FILES" | wc -l | tr -d ' ') CURRENT=0

echo "Found $TOTAL demo tape files" echo ""

Generate each demo

for tape_fi


### index.html

Claude Code Skills Marketplace - Demo Gallery * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #333; line-height: 1.6; } .container { max-width: 1400px; margin: 0 auto; padding: 20px; } header { text-align: center; padding: 60px 20px; color: white; } header h1 { font-size: 3rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } header p

Video Comparer

AI Skill Market Insights

Be Part of the 126+ Developer Community

Video Comparer

Features

🎯 Video Analysis

🖼️ Interactive Comparison

🔒 Security & Reliability

Code Examples

README.md

Generate All Demos

Colors for output

Check if VHS is installed

Find all .tape files

Generate each demo

Quick Start

Manual Installation

TEAR & SHARE

Video Downloader

AI Video Gen

AI Video Script Generator (Yijia Test)

AI Video Script Generator

AI Video Editor

Channels

Learn

Compare

Company

Agents