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
