npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@mdesjardins/prequel

v0.3.3

Published

Review it before it's a pull request — a local, GitHub-style diff reviewer

Readme

A local web app that renders a Git repo's diff using a UI that looks like GitHub's Pull Request Files changed tab. Supports system light/dark mode.

Why

If you're like me, you've probably spent hundreds of hours over more than a decade reviewing code, and you've done almost all of it through Github's pull request review interface. It's comfortable, and for me, it shifts my brain into a "mode" where it can efficiently evaluate and comment on code.

In the day of agentic coding, I was finding that my brain likes this style of review so much that I'd actually push code to Github to review it before telling Claude what changes I wanted made. That seemed silly, so I created this thing. It's basically a simulator of Github's PR interface, but works only on your locally staged and unstaged files. You can comment on them and easily dump this into your Claude Code session to make changes.

In the future I'd like to tighten the feedback loop with Claude and not copy/paste my comments for it to work on, not manually refresh the page, etc., but this was mostly a proof of concept.

Note

This is almost entirely vibe-coded. I've barely even looked at the code. Having said that, I am a giant hypocrite and am not accepting any AI created contributions to this codebase right now. In fact, I'm not really accepting any changes yet. There's a lot I want to do personally before opening this up to that.

Install

npm install -g @mdesjardins/prequel

Then run it from inside any git repo:

prequel [repoPath] [--base <ref>] [--port <n>] [--no-open]

Closing the loop with Claude

Instead of copy/pasting the export, install the bundled skill so Claude Code can read your comments straight from the running server and resolve each one as it addresses it:

prequel install claude

It goes in ~/.claude/skills rather than a project's .claude/skills because you run prequel against other repos — pass --project to install into the current repo instead, if you'd rather commit it and share it with a team. The command is idempotent, and refuses to overwrite a skill you've edited unless you pass --force. If an installed skill falls behind after an upgrade, prequel says so at startup.

claude is the only agent supported today; the command takes an agent name so support for others can be added without renaming it.

Then, from a Claude Code session in the repo you're reviewing: /prequel. Claude finds the server by scanning ports 4711-4720 and matching the repo root reported by /healthz, works the comments one at a time, and PATCHes each to status: resolved as it goes.

The page updates live over an event stream, so comments resolve and Claude's replies appear as it works — no reload. Append ?live=0 to the URL to opt out.

Claude can reply in a thread as well as resolve it, which is where it explains a decision or says why it didn't make a change. Its messages are labelled and accented so they're distinguishable from yours, and they never re-enter its own work queue. You can also resolve or reopen any comment yourself from the thread.

Run from source

npm install
npm start                 # serves the sample diff, opens the browser
npm link                  # makes `prequel` global, with live edits

URL params (all optional): ?view=split|unified picks the layout, ?diff=working|branch|all picks which changes to show (default working; persists), ?base=<ref> overrides the base branch, ?mode=light|dark forces a color mode (default follows the OS).

Layout

bin/prequel.js             CLI entry (port selection, browser launch, repo resolution)
src/server.js             Express app + routes (/ and /api/context)
src/git/gitService.js     git CLI wrapper: refs, diff generation, blob lines
src/git/diffParser.js     raw patch text -> diff model
src/render/renderer.js    diff model -> GitHub-faithful HTML (unified + split)
src/render/highlighter.js Shiki dual-theme syntax highlighting + word-diff overlay
src/render/wordDiff.js    intra-line (word-level) diff ranges
src/comments/commentStore.js  per-repo comment persistence (~/.prequel)
src/export/claudeExport.js    build markdown/JSON export payload
src/sampleDiff.js         built-in sample diff (fallback outside a repo)
views/review.ejs          page shell (loads Primer tokens + diff.css)
public/css/diff.css       GitHub "Files changed" clone
public/js/review.js       toggles, collapse/expand, copy path, Viewed, hunk expansion
public/js/comments.js     hover-+, compose, inject threads, delete