Difference — Setup & Installation

1. Use it hosted (no install)

Easiest

Just open the app and paste a GitHub URL or a raw diff — everything runs in your browser, no account or backend.

Supported URLs: pull requests, commits, and compare ranges from public github.com repositories. The diff is fetched through a public CORS proxy (no auth). For private repos or local changes, use the Paste diff tab or load a .diff / .patch file.

2. Run it locally

Difference lives in the tools monorepo. To run the dev server:

git clone https://github.com/jonathanhudak/tools.git
cd tools
pnpm install
pnpm diff dev        # or: pnpm --filter @hudak/difference dev

The dev server runs at http://localhost:3010/tools/difference/. Build a production bundle with pnpm diff build (output lands in docs/difference/).

Deep links / query parameters

The app reads these on load, so you can link straight to a diff:

?diff=<github url> (alias ?url=) — auto-load and render that diff.
?view=split — start in split view.

http://localhost:3010/tools/difference/?diff=https://github.com/owner/repo/pull/123&view=split

3. Install as a Claude Code skill

The repo ships a difference skill so you can ask Claude Code to open a diff locally. It lives at:

.claude/skills/difference/
├── SKILL.md            # skill definition
└── scripts/launch.sh   # starts the dev server + opens the diff

Use it in this repo

With Claude Code running in the tools repo, just ask — e.g. “open this PR in difference: <url>” — or run the launcher directly:

# Start the viewer:
.claude/skills/difference/scripts/launch.sh

# Open a specific PR / commit / compare URL:
.claude/skills/difference/scripts/launch.sh "https://github.com/owner/repo/pull/123"

# Start in split view:
.claude/skills/difference/scripts/launch.sh --split "https://github.com/owner/repo/commit/<sha>"

The launcher is idempotent: it installs dependencies on first run, reuses the dev server if it's already up on port 3010, then prints (and tries to open) the target URL.

Use it in another project

Run the one-liner below from your project directory. It clones the tools repo to ~/.local/share/tools-monorepo, installs its dependencies, and symlinks the difference skill into your project's .claude/skills/:

curl -fsSL https://raw.githubusercontent.com/jonathanhudak/tools/main/scripts/install-skills.sh | bash

Or, if you already have the repo cloned locally:

# Install into the current project:
./scripts/install-skills.sh difference

# Install globally (available in every Claude Code project):
./scripts/install-skills.sh --global difference

Skills are symlinked, not copied, so a future git pull in ~/.local/share/tools-monorepo automatically updates them. Requires Node.js and pnpm.

Requirements

Hosted: any modern browser.
Local / skill: Node.js and pnpm, plus the repo's installed dependencies.