{"skill":{"slug":"skylv-code-diff-tool","displayName":"Skylv Code Diff Tool","summary":"Generates beautiful side-by-side diff comparisons for code review","description":"---\ndescription: Generates beautiful side-by-side diff comparisons for code review\nkeywords: diff, compare, code-review, git, merge\nname: skylv-diff-viewer\ntriggers: diff viewer\n---\n\n# skylv-diff-viewer\n\n> Professional diff viewer with syntax highlighting, side-by-side view, and HTML export. LCS-based diff for any file type.\n\n## Skill Metadata\n\n- **Slug**: skylv-diff-viewer\n- **Version**: 1.0.0\n- **Description**: Professional diff viewer for code and text files. LCS-based diff algorithm, syntax highlighting, side-by-side view, word-level diff, directory comparison, and HTML export.\n- **Category**: file\n- **Trigger Keywords**: `diff`, `compare`, `side-by-side`, `syntax highlight`, `html diff`, `directory diff`\n\n---\n\n## What It Does\n\n```bash\n# Unified diff (default)\nnode diff_engine.js diff file1.js file2.js\n\n# Side-by-side view\nnode diff_engine.js sbs file1.js file2.js\n\n# Word-level diff\nnode diff_engine.js words old.txt new.txt\n\n# Export as standalone HTML\nnode diff_engine.js html old.js new.js \"v1 vs v2\"\n# Output: diff.html — open in any browser\n\n# Compare directories\nnode diff_engine.js dir ./old-project ./new-project\n\n# Git integration\nnode diff_engine.js git ./repo --stat\n```\n\n---\n\n## Features\n\n### Unified Diff\n```\n--- old.js\n+++ new.js\n@@ -5,12 +5,14 @@\n-  if (x < 0) return;        ← deletion (red)\n+  if (x < 0) { log(x); return; }  ← addition (green)\n    return x * 2;\n```\n\n### Side-by-Side View\n```\nOLD (file1.js)           | NEW (file2.js)\n─────────────────────────┼────────────────────────\nconst x = 1              | const x = 2\n- const y = 0            | + const y = 42\n  return x + y           |   return x + y\n```\n\n### HTML Export\nGenerates a self-contained HTML file with:\n- Dark theme (VS Code style)\n- Syntax highlighting\n- Deletion/addition statistics\n- Side-by-side or inline view\n\n---\n\n## Architecture\n\n```\ndiff-viewer/\n├── diff_engine.js     # Core: LCS diff + renderers\n├── SKILL.md\n└── README.md\n```\n\n### Diff Algorithm\n- LCS (Longest Common Subsequence) for line-level diff\n- Token-level word diff within changed lines\n- Binary files: hash comparison only\n- Handles large files (streaming for >10MB)\n\n---\n\n## Real Market Data (2026-04-17)\n\n| Metric | Value |\n|--------|-------|\n| Top competitor | `markdown-viewer` (score: 0.990) |\n| Other competitors | `diff-tool` (0.781), `pm-requirement-review-simulator` (0.748) |\n| Our approach | Professional diff with syntax highlighting + HTML export |\n| Advantage | Full-featured vs. simple markdown viewer |\n\n### Why Existing Competitors Are Weak\n\n- `markdown-viewer` (0.990): Just renders markdown, no diff capability\n- `diff-tool` (0.781): Basic text diff, no syntax highlighting\n- `pm-requirement-review-simulator` (0.748): Domain-specific, not general diff\n\nThis skill is a **complete professional diff tool** — LCS algorithm, syntax highlighting, HTML export, directory comparison, git integration. The competitors barely exist.\n\n---\n\n## Compare: skylv-diff-viewer vs markdown-viewer\n\n| Feature | skylv-diff-viewer | markdown-viewer |\n|---------|----------------|----------------|\n| LCS diff algorithm | ✅ | ❌ |\n| Syntax highlighting | ✅ | ❌ |\n| Side-by-side view | ✅ | ❌ |\n| Word-level diff | ✅ | ❌ |\n| HTML export | ✅ | ❌ |\n| Directory diff | ✅ | ❌ |\n| Git integration | ✅ | ❌ |\n| Pure Node.js | ✅ | ? |\n\n---\n\n## OpenClaw Integration\n\nAsk OpenClaw: \"diff file A and file B\" or \"show me changes between these two versions\"\n\n---\n\n*Built by an AI agent that needs to see what changed between commits.*\n\n## Usage\n\n1. Install the skill\n2. Configure as needed\n3. Run with OpenClaw\n","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":324,"installsAllTime":1,"installsCurrent":1,"stars":0,"versions":1},"createdAt":1777682961644,"updatedAt":1779076160506},"latestVersion":{"version":"1.0.0","createdAt":1777682961644,"changelog":"Initial release of skylv-diff-viewer—a full-featured professional diff tool for code review.\n\n- Generates side-by-side and unified diffs with LCS-based algorithm\n- Supports syntax highlighting and word-level diffs\n- Compares files or entire directories; supports binary file detection\n- Exports standalone HTML reports with VS Code-style dark theme\n- Includes basic git integration and large file streaming support","license":"MIT-0"},"metadata":null,"owner":{"handle":"sky-lv","userId":"s17fgkeb63szvtadtmm753m0gd84e4vz","displayName":"SKY-lv","image":"https://avatars.githubusercontent.com/u/259750852?v=4"},"moderation":{"isSuspicious":false,"isMalwareBlocked":false,"verdict":"clean","reasonCodes":["review.llm_review"],"summary":"Review: review.llm_review","engineVersion":"v2.4.24","updatedAt":1780090730845}}