preview-diff

name	preview-diff
description	Git diff preview tool with GitHub-style formatting and interactive features
user-invocable	true

Git Diff Preview Tool

Internal tool for previewing git changes with GitHub-style formatting. Accessed via /preview-diff command.

Features

Visual Design

• Beautiful gradient header with clear stats summary
• GitHub-style formatting using diff2html library
• Modern UI with rounded corners and smooth transitions
• Enhanced readability with optimized fonts and spacing

Functionality

• Accordion-style files: Click headers to expand/collapse
• Smart defaults: First file expanded, others collapsed
• Expand/Collapse All button for quick control
• Real-time search: Filter files by name
• View switching: Toggle between unified and split view
• Unified view (default): Traditional line-by-line diff
• Split view: Side-by-side comparison
• Change statistics: Files changed, additions, deletions
• Line numbers and syntax highlighting
• View persistence across sessions
• Shows all changes: tracked, staged, and untracked files

Agent Usage

When the user asks to preview a diff, DO NOT build HTML manually. Use the Bash tool to execute this skill's run.sh script:

# Preview current changes
git diff HEAD | ./run.sh

# Preview specific branch comparison
git diff main..feature-branch | ./run.sh

The script handles all HTML generation and automatically opens the result in the browser. Do NOT open the file manually to avoid duplicate tabs.

Options

The script works with sensible defaults but supports these flags for flexibility:

• -o, --output PATH - Custom output path
• --no-browser - Skip browser, output file path only

Technology

• diff2html: GitHub-style diff rendering
• git diff: Unified diff format
• JavaScript/CSS: Browser-based rendering