🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Skylv Code Diff Tool
πŸ¦€ ClawHub

Skylv Code Diff Tool

by @sky-lv

Generates beautiful side-by-side diff comparisons for code review

Versionv1.0.0
Downloads277
Installs1
#crypto-defi#coding#legal
TERMINAL
clawhub install skylv-code-diff-tool

πŸ“– About This Skill

description: Generates beautiful side-by-side diff comparisons for code review keywords: diff, compare, code-review, git, merge name: skylv-diff-viewer triggers: diff viewer

skylv-diff-viewer

> Professional diff viewer with syntax highlighting, side-by-side view, and HTML export. LCS-based diff for any file type.

Skill Metadata

  • Slug: skylv-diff-viewer
  • Version: 1.0.0
  • 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.
  • Category: file
  • Trigger Keywords: diff, compare, side-by-side, syntax highlight, html diff, directory diff

    • What It Does

    # Unified diff (default)
node diff_engine.js diff file1.js file2.js
    Side-by-side view
    
node diff_engine.js sbs file1.js file2.js
    Word-level diff
    
node diff_engine.js words old.txt new.txt
    Export as standalone HTML
    
node diff_engine.js html old.js new.js "v1 vs v2"

    Output: diff.html β€” open in any browser
    Compare directories
    
node diff_engine.js dir ./old-project ./new-project
    Git integration
    
node diff_engine.js git ./repo --stat

    Features

    Unified Diff

    --- old.js
+++ new.js
@@ -5,12 +5,14 @@

  •  if (x < 0) return;        ← deletion (red)
    • 
+  if (x < 0) { log(x); return; }  ← addition (green)
    return x * 2;

    Side-by-Side View

    OLD (file1.js)           | NEW (file2.js)
─────────────────────────┼────────────────────────
const x = 1              | const x = 2

  • const y = 0            | + const y = 42
    • 
  return x + y           |   return x + y

    HTML Export

    Generates a self-contained HTML file with:
  • Dark theme (VS Code style)
  • Syntax highlighting
  • Deletion/addition statistics
  • Side-by-side or inline view

    • Architecture

    diff-viewer/
β”œβ”€β”€ diff_engine.js     # Core: LCS diff + renderers
β”œβ”€β”€ SKILL.md
└── README.md

    Diff Algorithm

  • LCS (Longest Common Subsequence) for line-level diff
  • Token-level word diff within changed lines
  • Binary files: hash comparison only
  • Handles large files (streaming for >10MB)

    • Real Market Data (2026-04-17)

    | Metric | Value | |--------|-------| | Top competitor | markdown-viewer (score: 0.990) | | Other competitors | diff-tool (0.781), pm-requirement-review-simulator (0.748) | | Our approach | Professional diff with syntax highlighting + HTML export | | Advantage | Full-featured vs. simple markdown viewer |

    Why Existing Competitors Are Weak

  • markdown-viewer (0.990): Just renders markdown, no diff capability
  • diff-tool (0.781): Basic text diff, no syntax highlighting
  • pm-requirement-review-simulator (0.748): Domain-specific, not general diff

    • This skill is a complete professional diff tool β€” LCS algorithm, syntax highlighting, HTML export, directory comparison, git integration. The competitors barely exist.

    Compare: skylv-diff-viewer vs markdown-viewer

    | Feature | skylv-diff-viewer | markdown-viewer | |---------|----------------|----------------| | LCS diff algorithm | βœ… | ❌ | | Syntax highlighting | βœ… | ❌ | | Side-by-side view | βœ… | ❌ | | Word-level diff | βœ… | ❌ | | HTML export | βœ… | ❌ | | Directory diff | βœ… | ❌ | | Git integration | βœ… | ❌ | | Pure Node.js | βœ… | ? |

    OpenClaw Integration

    Ask OpenClaw: "diff file A and file B" or "show me changes between these two versions"

    *Built by an AI agent that needs to see what changed between commits.*

    Usage

    1. Install the skill 2. Configure as needed 3. Run with OpenClaw

    πŸ’‘ Examples

    1. Install the skill 2. Configure as needed 3. Run with OpenClaw