LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
This skill should be used when comparing two videos to analyze compression results or quality differences.
$ npx skills add daymade/claude-code-skills --skill video-comparer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install daymade/claude-code-skills video-comparer --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/daymade/claude-code-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/video-comparer .claude/skills/video-comparer && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "video-comparer" agent skill from https://github.com/daymade/claude-code-skills/tree/main/video-comparer into .claude/skills/video-comparer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-comparer", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/daymade/claude-code-skills/tree/main/video-comparerType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add daymade/claude-code-skills --skill video-comparer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install daymade/claude-code-skills video-comparer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/daymade/claude-code-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/video-comparer .agents/skills/video-comparer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "video-comparer" agent skill from https://github.com/daymade/claude-code-skills/tree/main/video-comparer into .agents/skills/video-comparer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-comparer", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add daymade/claude-code-skills --skill video-comparer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install daymade/claude-code-skills video-comparer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/daymade/claude-code-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/video-comparer .cursor/skills/video-comparer && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "video-comparer" agent skill from https://github.com/daymade/claude-code-skills/tree/main/video-comparer into .cursor/skills/video-comparer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-comparer", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/daymade/claude-code-skills.git --path video-comparer--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add daymade/claude-code-skills --skill video-comparer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install daymade/claude-code-skills video-comparer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/daymade/claude-code-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/video-comparer .gemini/skills/video-comparer && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "video-comparer" agent skill from https://github.com/daymade/claude-code-skills/tree/main/video-comparer into .gemini/skills/video-comparer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-comparer", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install daymade/claude-code-skills video-comparerInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add daymade/claude-code-skills --skill video-comparer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/daymade/claude-code-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/video-comparer .github/skills/video-comparer && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "video-comparer" agent skill from https://github.com/daymade/claude-code-skills/tree/main/video-comparer into .github/skills/video-comparer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-comparer", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add daymade/claude-code-skills --skill video-comparer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install daymade/claude-code-skills video-comparer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/daymade/claude-code-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/video-comparer .opencode/skills/video-comparer && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "video-comparer" agent skill from https://github.com/daymade/claude-code-skills/tree/main/video-comparer into .opencode/skills/video-comparer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-comparer", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
video-comparerThis skill should be used when comparing two videos to analyze compression results or quality differences.
Video Comparer is an agent skill from daymade/claude-code-skills. 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.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including scripts, reference files and assets (for example `README.md`, `references/configuration.md` and `references/ffmpeg_commands.md`).
It sits in Frontend & Design, covering HTML artifacts. It works with FFmpeg. The repository describes itself as: Professional Claude Code skills marketplace featuring production-ready skills for enhanced development workflows. The licence is MIT.
Read from SKILL.md and the folder at commit 872127b. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3aptbrewFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
ffmpeg.orgFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Video Comparer loads about 1.4k tokens when it runs, and up to ~4.7k if it reads all its reference files. Until then it costs about 99 tokens; SKILL.md has 478 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
sudo apt update && sudo apt install ffmpegAutomated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from daymade/claude-code-skills at commit 872127b, republished under its MIT licence (© daymade). 478 words, ~1,356 tokens.
.claude/skills/video-comparer/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.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.
Use this skill when:
python3 scripts/compare.py original.mp4 compressed.mp4Generates comparison.html with:
# 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"
doneFFmpeg 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 ffmpegPython 3.8+ (uses type hints, f-strings, pathlib)
.mp4 (recommended), .mov, .avi, .mkv, .webmThe script automatically validates:
Clear error messages with resolution guidance appear when validation fails.
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.
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.
The generated HTML report includes:
The script implements:
shell=True, validated arguments)ValidationError, FFmpegError, VideoComparisonError"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
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.
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 constantsassets/template.html: HTML report template for customizing viewing modes and styling© daymade, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 6 other files (scripts, references, assets) in video-comparer of daymade/claude-code-skills.
Open the folder on GitHubat commit 872127b
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in daymade/claude-code-skills, which our catalogue first saw on October 7, 2026.
Video Comparer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Video Comparer this skilldaymade/claude-code-skills | 1.4k | 1 repos | ~1.4k | Automated safety check: Notes | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Paperclip Pagepaperclipai/paperclip | 99k | — | ~1k | Automated safety check: Pass | MIT | |
| Openkb Deck NeonVectifyAI/OpenKB | 4.8k | 1 repos | ~4.3k | Automated safety check: Pass | Apache-2.0 | |
| Webhome Homepage Builderwebhtv/webhtv | 1.7k | — | ~3.8k | Automated safety check: Pass | GPL-3.0 | |
| Solo Artifactssolo-agent/solo | 697 | — | ~961 | Automated safety check: Pass | MIT |
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
paperclipai/paperclip
Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.
VectifyAI/OpenKB
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow /…
webhtv/webhtv
Build, review, debug, reverse-engineer data sources for, and package FongMi/WebHome custom homepage single-file HTML.
solo-agent/solo
A skill your agent uses when a Solo task or thread should become an interactive, reviewable, self-contained HTML artifact for progress/status, review/decision, or comparison/leaderboard work inside…
QuZhan51496/paper2anything
Convert an academic paper PDF into a publish-ready, self-contained single-page project homepage (a self-contained index.html) — the kind of paper landing page researchers host on GitHub Pages.
daymade/claude-code-skills
Generates professional animated CLI demos as GIFs using VHS terminal recordings.
daymade/claude-code-skills
Converts DOCX/PDF/PPTX and saved HTML/HTM to high-quality Markdown with automatic post-processing.
daymade/claude-code-skills
Generates several distinct, clickable HTML interaction prototypes for one product surface into a Design Board and collects selection/remix feedback before implementation.
daymade/claude-code-skills
Diagnoses and repairs repository setup and guarded Git workflows for Claude Code or Codex — environment repair, startup sync, hook auditing, collaborator handoff.
daymade/claude-code-skills
Pulls Bigdata.com (RavenPack) financial and news data via the official bigdata-client SDK and /v1/ REST endpoints — structured financials, prices, analyst estimates, entity-sentiment series…
daymade/claude-code-skills
Fetches real, citable Bilibili (B站) video data — stats, metadata, tags, and full danmaku text — via login-free API calls, never hand-typed or estimated.
Works with
Categories
This skill should be used when comparing two videos to analyze compression results or quality differences. Video Comparer is an agent skill from daymade/claude-code-skills. This skill should be used when comparing two videos to analyze compression results or quality differences.
Video Comparer fits situations like: users mention compare videos; compression analysis; before/after compression; request quality assessment of compressed videos.
Run `npx skills add daymade/claude-code-skills --skill video-comparer -a claude-code`. Or copy the skill folder (video-comparer in daymade/claude-code-skills) into .claude/skills/video-comparer in your project. Claude Code loads it when a task matches its description.
Run `npx skills add daymade/claude-code-skills --skill video-comparer -a codex`. Or copy the skill folder (video-comparer in daymade/claude-code-skills) into .agents/skills/video-comparer in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add daymade/claude-code-skills --skill video-comparer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/video-comparer, .gemini/skills/video-comparer, .github/skills/video-comparer and .opencode/skills/video-comparer in your project.
Going by SKILL.md and its folder, Video Comparer needs Python for the scripts in its folder and the command-line tools its instructions call (python3, apt and brew). Our summary lists: Python 3.
SKILL.md names 1 domain. In commands or code: ffmpeg.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found notes only (runs commands with sudo), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Video Comparer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.4k tokens (SKILL.md is roughly 5.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.4k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Video Comparer: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Paperclip Page (paperclipai/paperclip, 99k stars), Openkb Deck Neon (VectifyAI/OpenKB, 4.8k stars) and Webhome Homepage Builder (webhtv/webhtv, 1.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
daymade (a GitHub user) maintains it in daymade/claude-code-skills, which has 1,447 GitHub stars. The repository holds 103 skills in this directory. The repository was last updated on October 9, 2026.
Source: daymade/claude-code-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.