Communitygithub.com

ComeOnOliver/skillshub

This skill should be used when comparing two videos to analyze compression results or quality differences. Generates interactive HTML reports with quality metrics (PSNR, SSIM) and frame-by-frame visual comparisons. Triggers when users mention "compare videos", "video quality", "compression analysis", "before/after compression", or request quality assessment of compressed videos.

skillshub とは?

skillshub is a Claude Code agent skill that this skill should be used when comparing two videos to analyze compression results or quality differences. Generates interactive HTML reports with quality metrics (PSNR, SSIM) and frame-by-frame visual comparisons. Triggers when users mention "compare videos", "video quality", "compression analysis", "before/after compression", or request quality assessment of compressed videos.

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ComeOnOliver/skillshub/tree/HEAD/skills/daymade/claude-code-skills/video-comparer

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Video Comparer

Overview

Compare two videos and generate an interactive HTML report analyzing compression results. The script extracts video metadata, calculates quality metrics (PSNR, SSIM), and creates frame-by-frame visual comparisons with three viewing modes: slider, side-by-side, and grid.

When to Use This Skill

Use this skill when:

  • Comparing original and compressed videos
  • Analyzing video compression quality and efficiency
  • Evaluating codec performance or bitrate reduction impact
  • Users mention "compare videos", "video quality", "compression analysis", or "before/after compression"

Core Usage

Basic Command

python3 scripts/compare.py original.mp4 compressed.mp4

Generates comparison.html with:

  • Video parameters (codec, resolution, bitrate, duration, file size)
  • Quality metrics (PSNR, SSIM, size/bitrate reduction percentages)
  • Frame-by-frame comparison (default: frames at 5s intervals)

Command Options

# Custom output file
python3 scripts/compare.py original.mp4 compressed.mp4 -o report.html

# Custom frame interval (larger = fewer frames, faster processing)
python3 scripts/compare.py original.mp4 compressed.mp4 --interval 10

# Batch comparison
for original in originals/*.mp4; do
    compressed="compressed/$(basename "$original")"
    output="reports/$(basename "$original" .mp4).html"
    python3 scripts/compare.py "$original" "$compressed" -o "$output"
done

Requirements

System Dependencies

FFmpeg and FFprobe (required for video analysis and frame extraction):

# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt update && sudo apt install ffmpeg

# Windows
# Download from https://ffmpeg.org/download.html
# Or use: winget install ffmpeg

Python 3.8+ (uses type hints, f-strings, pathlib)

Video Specifications

  • Supported formats: .mp4 (recommended), .mov, .avi, .mkv, .webm
  • File size limit: 500MB per video (configurable)
  • Processing time: ~1-2 minutes for typical videos; varies by duration and frame interval

Script Behavior

Automatic Validation

The script automatically validates:

  • FFmpeg/FFprobe installation and availability
  • File existence, extensions, and size limits
  • Path security (prevents directory traversal)

Clear error messages with resolution guidance appear when validation fails.

Quality Metrics

The script calculates two standard quality metrics:

PSNR (Peak Signal-to-Noise Ratio): Pixel-level similarity measurement (20-50 dB scale, higher is better)

SSIM (Structural Similarity Index): Perceptual similarity measurement (0.0-1.0 scale, higher is better)

For detailed interpretation scales and quality thresholds, consult references/video_metrics.md.

Frame Extraction

The script extracts frames at specified intervals (default: 5 seconds), scales them to consistent height (800px) for comparison, and embeds them as base64 data URLs in self-contained HTML. Temporary files are automatically cleaned after processing.

Output Report

The generated HTML report includes:

  • Slider Mode: Drag to reveal original vs compressed (default)
  • Side-by-Side Mode: Simultaneous display for direct comparison
  • Grid Mode: Compact 2-column layout
  • Zoom Controls: 50%-200% magnification
  • Self-contained format (no server required, works offline)

Important Implementation Details

Security

The script implements:

  • Path validation (absolute paths, prevents directory traversal)
  • Command injection prevention (no shell=True, validated arguments)
  • Resource limits (file size, timeouts)
  • Custom exceptions: ValidationError, FFmpegError, VideoComparisonError

Common Error Scenarios

"FFmpeg not found": Install FFmpeg via platform package manager (see Requirements section)

"File too large": Compress videos before comparison, or adjust MAX_FILE_SIZE_MB in scripts/compare.py

"Operation timed out": Increase FFMPEG_TIMEOUT constant or use larger --interval value (processes fewer frames)

"Frame count mismatch": Videos have different durations/frame rates; script auto-truncates to minimum frame count and shows warning

Configuration

The script includes adjustable constants for file size limits, timeouts, frame dimensions, and extraction intervals. To customize behavior, edit the constants at the top of scripts/compare.py. For detailed configuration options and their impacts, consult references/configuration.md.

Reference Materials

Consult these files for detailed information:

  • references/video_metrics.md: Quality metrics interpretation (PSNR/SSIM scales, compression targets, bitrate guidelines)
  • references/ffmpeg_commands.md: FFmpeg command reference (metadata extraction, frame extraction, troubleshooting)
  • references/configuration.md: Script configuration options and adjustable constants
  • assets/template.html: HTML report template for customizing viewing modes and styling

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

ComeOnOliver/skillshub

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

ComeOnOliver/skillshub

Next.js 16+ 和 Turbopack — 增量打包、文件系统缓存、开发速度,以及何时使用 Turbopack 与 webpack。

ComeOnOliver/skillshub

SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.

ComeOnOliver/skillshub

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio, video), and create real time alerts for events from live streams or desktop capture.

ComeOnOliver/skillshub

AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.

ComeOnOliver/skillshub

Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server Components, Client Components, App Router, 파일 구조, Shadcn/ui 컴포넌트, 성능 최적화, TypeScript 모범 사례 포함. 컴포넌트, 페이지, 기능 생성, 데이터 페칭, 스타일링, 라우팅, 프론트엔드 코드 작업 시 사용.

ComeOnOliver/skillshub

Provides Tamagui patterns for config v4, compiler optimization, styled context, and cross-platform styling. Must use when working with Tamagui projects (tamagui.config.ts, @tamagui imports).

ComeOnOliver/skillshub

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

ComeOnOliver/skillshub

Create high-converting, visually distinctive landing pages. Use when building marketing pages, product launches, SaaS homepages, or any single-page conversion-focused website. Guides section-by-section composition with anti-AI-slop principles.

ComeOnOliver/skillshub

Auto-loaded context for Portfolio Buddy 2 development. Use for ANY task involving: React 19 development, TypeScript, portfolio analysis features, metrics calculations, trading strategy comparison, or working with the Portfolio Buddy 2 codebase. Contains tech stack, known issues, and architectural constraints.

ComeOnOliver/skillshub

Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.

ComeOnOliver/skillshub

Implement UI using Shadcn MCP (atoms/theme) and 21st.dev MCP (complex sections). Use when adding buttons, layouts, or generating landing pages.

ComeOnOliver/skillshub

A conceptual skill for building an API client in Next.js that handles JWT tokens

ComeOnOliver/skillshub

Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.

ComeOnOliver/skillshub

The Design System, Theme, and UX rules for the Physical AI Hub.

ComeOnOliver/skillshub

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

ComeOnOliver/skillshub

Build Next.js 16 applications with correct patterns and distinctive design. Use when creating pages, layouts, dynamic routes, upgrading from Next.js 15, or implementing proxy.ts. Covers breaking changes (async params/searchParams, Turbopack, cacheComponents) and frontend aesthetics. NOT when building non-React or backend-only applications.

ComeOnOliver/skillshub

Next.js 16+ uses App Router with Server Components by default. Client Components are only used when interactivity is needed (hooks, event handlers, browser APIs).

ComeOnOliver/skillshub

All TypeScript types are defined in `frontend/types/index.ts`. Types match backend API response structure and provide type safety across the frontend application.

ComeOnOliver/skillshub

Build interfaces that resonate, not just render. This skill enforces bold, intentional

関連スキル