veelenga 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