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

cursor-plan-preview

v0.5.7

Published

Preview, annotate, and share Cursor plan mode files with your team

Readme


Your Agent Plans in the Dark

Cursor's plan mode generates a detailed implementation plan - files to change, architecture decisions, task breakdown. You approve it, the agent starts building. Your teammates find out when the PR lands. Or when something breaks.

There's no review step. No "hey, before you build this, can you check if this makes sense?" moment.

CPR puts the plan in front of your team before a single line of code is written.

  1. Agent creates a plan, you run cursor-plan-preview plan-preview-and-share
  2. Plan opens in a browser UI — you annotate inline (delete, replace, comment, insert)
  3. Click Share Plan → URL copied with everything encoded in the hash
  4. Teammate opens the URL, adds their own annotations, shares back
  5. You export the feedback, the agent reads it on the next prompt

No accounts. No backend. The URL contains everything.

Quick Start

npx cursor-plan-preview --setup

This installs a Cursor rule and a /plan-preview-and-share slash command.

After the agent creates a plan, preview and share it — type /plan-preview-and-share in Cursor chat, or run in terminal:

npx cursor-plan-preview plan-preview-and-share

Auto-detects the latest plan from ~/.cursor/plans/ and opens it in your browser. To preview a specific file:

npx cursor-plan-preview plan-preview-and-share path/to/plan.md

How It Works

Agent generates plan  ->  saved to ~/.cursor/plans/
                              |
              You run: cursor-plan-preview plan-preview-and-share
                              |
                    Plan opens in browser UI
                              |
              You annotate + click Share Plan  ->  URL copied
                              |
              Teammate opens URL  ->  adds annotations
                              |
              You click Export Feedback  ->  -feedback.md written
                              |
              Agent reads feedback  ->  adjusts plan before building

What You Can Annotate

Select any text in the plan to pick an annotation type:

| | | | --------------------------- | ------------------------------------ | | Delete (scissors) | Mark text for removal | | Replace (arrows) | Suggest replacement text | | Comment (speech bubble) | Add a note to specific text | | Insert (plus) | Add new text at a point | | Global Note | Add a note not tied to specific text |

Annotations show as color-coded highlights in the plan body. The sidebar lists all annotations with a count badge.

Sharing

Plans under ~8KB compressed get encoded entirely in the URL hash. Nothing leaves the browser. Your teammate opens the link and everything decodes client-side.

For larger plans, run cursor-plan-preview plan-preview-and-share locally and share your screen, or copy the plan body into a Slack thread.

The Feedback Loop

After teammates annotate and share back:

  1. Open the annotated URL
  2. Click Export Feedback
  3. A *-feedback.md file appears in ~/.cursor/plans/
  4. The installed Cursor rule tells the agent to check for feedback before building
  5. Agent summarizes annotations and asks if you want to incorporate them

What Gets Installed

npx cursor-plan-preview --setup installs one file:

| File | What it does | | -------------------------------------------------- | ----------------------------------------------------------------------------------- | | ~/.cursor/rules/plan-preview.mdc | Agent rule: suggests plan-preview-and-share after every plan, checks for feedback | | ~/.cursor/skills/plan-preview-and-share/SKILL.md | /plan-preview-and-share slash command in Cursor chat |

To remove everything:

npx cursor-plan-preview --uninstall

Commands

cursor-plan-preview plan-preview-and-share [file]  # open latest (or specific) plan in preview UI
cursor-plan-preview list               # show recent plans from ~/.cursor/plans/
cursor-plan-preview --setup            # install Cursor rule
cursor-plan-preview --uninstall        # remove Cursor rule + legacy hook entries

Architecture

cursor-plan-preview/
├── src/
│   ├── cli.ts          CLI entry (plan-preview-and-share, list, setup, uninstall)
│   ├── server.ts       Local HTTP server (plan API + static files)
│   ├── parser.ts       Plan file parser (YAML frontmatter + markdown)
│   └── utils.ts        Shared utilities
├── ui/
│   └── src/
│       ├── App.tsx     Review UI (React 19 + marked)
│       └── utils/
│           └── sharing.ts  Deflate + base64 URL encoding
└── agent-config/
    ├── setup.mjs       --setup handler
    └── cursor/rules/   Cursor rule for feedback loop

Tech Stack

| | | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------- | | Language | TypeScript | | UI | React | | Markdown | marked | | Bundler | tsup + Vite | | Testing | Vitest | | CI | GitHub Actions |

Contributing

Contributions welcome. See CONTRIBUTING.md for setup and guidelines.

Author

Made by ofershap

LinkedIn GitHub


If this helped you, star the repo, open an issue if something breaks.

License

MIT © Ofer Shapira