u/NoobCoder07

I kept merging PRs that passed every test, then finding out days later that something shifted or broke on a page I never opened. Functional tests don't catch visual regressions.

So I built shiroDiff — a free GitHub app that, on every PR, screenshots your app before and after the change, diffs them, and posts the before/after/diff right in the PR comments (with a pixel + structural-similarity score so you can tell real changes from rendering noise).

The new bit I'm kind of proud of: it auto-detects which routes your PR actually changed (Next.js, Remix, SvelteKit, Nuxt) and only screenshots those — change a shared component and it checks the homepage too. No config needed, but you can add a .shirodiff.yml to control it.

https://preview.redd.it/l6e0esc3raah1.png?width=1758&format=png&auto=webp&s=394ddce20bbac48d1784009ac6688fbf68647153

Honest about the limits: public/no-auth routes only right now, and it skips dynamic routes like /blog/[slug]. Only runs on PRs, so it doesn't touch your CI minutes.

It's free and I want brutal feedback from people who ship frontend — useful, or noise? Install: github.com/apps/shirodiff. Roast it.

I kept merging PRs that passed every test, then finding out days later that something shifted or broke on a page I never opened. Functional tests don't catch visual regressions.

So I built shiroDiff — a free GitHub app that, on every PR, screenshots your app before and after the change, diffs them, and posts the before/after/diff right in the PR comments (with a pixel + structural-similarity score so you can tell real changes from rendering noise).

The new bit I'm kind of proud of: it auto-detects which routes your PR actually changed (Next.js, Remix, SvelteKit, Nuxt) and only screenshots those — change a shared component and it checks the homepage too. No config needed, but you can add a .shirodiff.yml to control it.

https://preview.redd.it/s2yzuodo2w9h1.png?width=1704&format=png&auto=webp&s=c6e4dc4b449744a80d9ccc5814fb35f0a3cf804c

Honest about the limits: public/no-auth routes only right now, and it skips dynamic routes like /blog/[slug]. Only runs on PRs, so it doesn't touch your CI minutes.

It's free and I want brutal feedback from people who ship frontend — useful, or noise?
Install:

https://github.com/apps/shirodiff

github readme : https://github.com/Tarunya0704/shirodiff
do give me a start if you guys like this post
Roast it.

I kept merging PRs that passed all my tests, then finding out days later that something shifted or broke in the UI on a page I never looked at. Functional tests don't catch that stuff.

So I built shiroDiff a free GitHub app that screenshots your app before and after every PR, diffs them, and posts the before/after/diff right in the PR comments, with a pixel + structural-similarity score so you can tell real changes from rendering noise.

https://preview.redd.it/a1w6u0u0849h1.png?width=1914&format=png&auto=webp&s=ad04a76924420121c4228d94f322db859d742fb5

Screenshot of it running on a real PR:

It's early and I'll be honest about the limits: right now it's Next.js, homepage only, desktop viewport. Multi-page config and mobile are next. It only runs on PRs, so it doesn't touch your CI minutes.

I'm not selling anything — it's free and I want brutal feedback from people who actually ship frontend. Does this solve a real problem for you, or is it noise? Install: github.com/apps/shirodiff — roast it.

I kept merging PRs that silently broke the UI. A padding change that shifted the nav, a color tweak that looked fine in the code diff but wrong on the actual page. By the time someone noticed, it was already in production.

So I built shiroDiff — a GitHub App that runs on every pull request automatically:

1. Builds your app at the base branch (before)

2. Builds your app at the head branch (after)

3. Takes Playwright screenshots of both

4. Runs pixelmatch + SSIM comparison

5. Posts a PR comment with before/after/diff images and exact scores

https://preview.redd.it/lp8gnpve706h1.png?width=1041&format=png&auto=webp&s=17357ccaf5aad355a22dd75f51df031c03e62970

Here's what the PR comment looks like:

The whole setup: click Install → pick your repos → done. No config files, no CI changes, no accounts.

It's free right now. I'm looking for teams to try it and tell me what breaks.

Install (30 sec): https://github.com/apps/shirodiff

README + roadmap: https://github.com/Tarunya0704/shirodiff

Currently supports Next.js (App Router + Pages Router). Adding more frameworks based on what people ask for.

What would make this actually useful for your workflow?