# Preview Diff

> Git diff preview tool with GitHub-style formatting and interactive features Use when this capability is needed.

- Skill: `tomevault-io/preview-diff` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/preview-diff`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/preview-diff/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/preview-diff

---


# 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:

```bash
# 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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/veelenga) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->