mehdibha React Grab
The user selects UI elements in their browser and copies them with React Grab.
npx react-grab@latest pull waits for new grabs and prints each as one line of
JSON (usually one, sometimes a few if several were copied), starting the
background watcher automatically the first time. Run it in a loop.
The loop
Repeat until the user says stop:
- Wait for the next grab:
npx react-grab@latest pull --max-age 0
It blocks until the user grabs something, then prints the new grab(s) — one JSON
object per line. --max-age 0 is important: it delivers every grab regardless of
age, so a comment the user added while you were busy on the previous task isn't
silently dropped (the default skips grabs older than ~5 min as stale). Act on
every line. If your shell cancels the command before a grab arrives, just run it
again — nothing is lost; the watcher keeps capturing in the background and pull
resumes where it left off.
- Act on the grab (below).
- Go back to step 1.
A new grab while you're working wins
The watcher never stops capturing — including while you're mid-task. A grab the user makes before you finish is them redirecting you, so it supersedes whatever you're doing. Don't make them wait for the old task to finish.
While acting on a grab:
- Run anything slow (dev servers, builds, installs, test runs) as a background process, never a blocking foreground call, so you stay free to notice new grabs.
- Between steps, peek without blocking:
npx react-grab@latest pull --max-age 0 --wait 0
Empty output means nothing new — keep going. If it prints a grab, the user has moved on: stop the current task, cancel any background processes you started for it, and act on the newest grab instead.
Acting on a grab
Each grab JSON has content (the element's source references) and, in prompt
mode, prompt (the user's typed instruction):
promptpresent → that comment IS the task. Execute it against the grabbed source;contentholds the references (// path:line,in Component (at …)), so jump straight to that file.- No
prompt→ apply the standing instruction the user set when starting the loop, or, if there is none, triage it (summarize component +file:line) and wait for direction.
Stopping
When the user says stop, run this and don't pull again:
npx react-grab@latest stop
Notes
- The watcher reads the clipboard on the machine it runs on — run it on the same machine as the browser, not over SSH or in a remote container.