Nitpick is a Claude Code plugin for Next.js. Press a hotkey in your running dev app, circle the element that's wrong, say what's off — and each report arrives mapped to the exact component & source line, with a screenshot. Then Claude (or your BMAD dev agent) fixes them one by one.
Activate with Ctrl+Shift+. · double-tap Shift · or the on-screen badge
Two pieces joined by a file bridge — reporting stays separate from fixing.
A dev-only overlay lives in your Next.js app. A draggable toolbox lets you Inspect (element + locators + a cropped image of each element), Snip a region and mark it up, Record a multi-screen action flow, or Fix me (report a problem with Nitpick itself) — then add a comment (typed or dictated) and Save.
A dev-only API route writes each report to .nitpick/NNN.json + an annotated NNN.png — including the component, selector, styles and source line. Nothing leaves your machine.
/nitpick:process reads the queue, views each screenshot, opens the source line and fixes it — or, in a BMAD project, routes each item to the dev agent / into stories.
Report-only & dev-only: the overlay returns null and the route returns 410 in production — it never changes your app's behavior.
Pick by the kind of issue you're reporting.
Click the exact element(s) that are wrong. Claude gets the component, source line, computed styles, Playwright-style locators — and a cropped image of each one.
Ideal for
Drag a box around the area, then mark it up with arrow / line / circle / box / pen / text. Saved as one flat annotated image — captured correctly at any scroll position.
Ideal for
<canvas>)Hide the overlay and act out the bug. Nitpick logs your clicks, inputs and navigation across screens as an ordered repro script (each step with its route + locator).
Ideal for
The overlay misbehaving? Type or dictate what's wrong. The report is flagged meta and the screenshot includes the Nitpick UI — so your agent fixes the tool, not your app.
Ideal for
Pair any tool with a reference image (paste/drop into the comment box) to show the look you want — and remember: one element → Inspect · a layout/area → Snip · a sequence → Record · Nitpick itself → Fix me.
A tiny stand-in for the real overlay. Click Activate (or press Ctrl+Shift+. / double-tap Shift), then click an element below, add a comment, and Save.
Here's what's happening with your projects today.
.nitpick/Nothing captured yet — activate and click an element.
Pick your workflow. Replace lokkrish with the repo you install from (or use a local path).
# in Claude Code /plugin marketplace add lokkrish/nitpick /plugin install nitpick@nitpick-tools # in your Next.js project /nitpick:setup # scaffolds the overlay + dev API route, # mounts it in the root layout (all pages), # gitignores .nitpick/, installs html-to-image npm run dev # (re)start the dev server /nitpick:sanity # optional: verify the install end-to-end # (real browser; selection in all 4 corners)
npm run dev)..nitpick/./nitpick:process — it views each screenshot, opens the source line, fixes it, and marks it resolved.# remove scaffolded code from the app /nitpick:remove # flags: --keep-feedback --keep-dep # remove the plugin from Claude Code /plugin uninstall nitpick@nitpick-tools /plugin marketplace remove nitpick-tools
Already inert in production, so removal is cleanup, not safety.
Same capture overlay, but fixes are routed through BMAD's agents instead of edited directly. Verified against BMAD-METHOD v6.
# in Claude Code /plugin marketplace add lokkrish/nitpick /plugin install nitpick@nitpick-tools # overlay (same as standalone) /nitpick:setup npm run dev # add the BMAD-native agent /nitpick:setup-bmad # v6 → installs the bmad-nitpick skill # (.claude/skills/bmad-nitpick) # then reload Claude Code
/nitpick:bmad or activate the bmad-nitpick skill (“triage nitpick”).bmad-quick-dev to implement now./nitpick:bmad stories <epic> turns backlog items into BMAD stories (bmad-create-story) for the dev agent.# remove the BMAD-native agent # v6: rm -rf .claude/skills/bmad-nitpick \ .agents/skills/bmad-nitpick # v4: delete .bmad-core/agents/nitpick.md # then the overlay + plugin /nitpick:remove /plugin uninstall nitpick@nitpick-tools
Removing the skill leaves your BMAD install otherwise untouched.
| Command | What it does | Mode |
|---|---|---|
/nitpick:setup | Scaffold the overlay + dev API route into a Next.js app (all pages). | Both |
/nitpick:sanity | Verify an install end-to-end: static checks + a real-browser test (four-corner selection, snip pipeline, hostile-CSS regression, Fix me & API round-trips). | Both |
/nitpick:process | Fix the .nitpick/ queue directly in Claude (defers to BMAD if detected); meta ("Fix me") items fix the tool itself. | Claude |
/nitpick:bmad | Triage feedback & route it: triage · quick-fix <id> · backlog <id> · stories <epic> · status. | BMAD |
/nitpick:setup-bmad | Install the BMAD-native Nitpick agent (v6 skill / v4 agent). | BMAD |
/nitpick:remove | Reverse setup: remove overlay, route, mount, .nitpick/ & dep. | Both |
nitpick-bmad agent | Subagent that detects BMAD & coordinates the handoff. | BMAD |