The crop you drag around a screenshot is not cosmetic. It tells the agent which element you mean. Crop too wide and it edits the wrong button. Crop too tight and it has no idea where the thing sits on the page. Here are four rules that keep the fix pointed at the element you actually care about, with the failure mode for each when you ignore it.
Keep one broken element plus enough context to locate it
Include the element you want changed and the two or three things immediately around it: the label above the field, the button beside it, the section heading. That surrounding detail is how the agent (or a person reading the screenshot to prompt workflow) confirms it is looking at the right place before it writes a single line.
Say the submit button on your checkout is misaligned. Crop the button, the two form fields above it, and the total line. Now anyone reading the still knows this is the checkout submit, not the newsletter signup that uses the same blue.
Failure mode: you crop the button alone, on a white background, and the agent finds four buttons with that exact style in the codebase. It picks one. Sometimes it picks yours. Usually it does not.
Cut the chrome that has nothing to do with the fix
Browser tabs, the OS menu bar, your bookmarks, an unrelated sidebar full of navigation links. None of it describes the problem, and all of it competes for attention in the frame. Cropping the captured still is the only image edit Cobalt Capture offers, so use it to remove noise instead of adding arrows on top of it.
A tight frame around the relevant region reads faster for a human reviewer and produces cleaner markdown screenshots when the review is exported. The agent reads the markdown, not the pixels, so a crop that includes half your desktop just pads the description with things nobody needs to fix.
Failure mode: you leave the full screen in. The agent spends its reasoning trying to decide whether the sidebar, the header, or the modal is the subject. You get a fix for the wrong region, or a clarifying question that costs you a round trip.
When two elements interact, keep both in the same frame
Some bugs live in the relationship between two things. A tooltip that overlaps the field it describes. A sticky header that covers the first row of a table on scroll. A dropdown that pushes the footer off screen. If you crop only one of the two, you have described half a problem.
Capture both elements in one still and add a comment that names the interaction: "the header covers the top row when the page scrolls past 200 pixels." If the two things sit far apart on the page, take two screenshots as separate items and say in the comment that they are related. Each screenshot can also carry numbered pins so you can point at the exact overlap rather than describing it in prose.
Failure mode: you crop the tooltip tight, the agent restyles the tooltip, and the overlap comes back because the real problem was the field's z-index. The fix targeted the symptom you framed, not the cause you cut out.
Match the crop to the receiver, not just the element
The same review serves different people. A client reading the public link wants to recognize the screen. A developer or coding agent wants the smallest region that isolates the change. When those pull in different directions, a slightly wider crop that shows where the element lives usually wins, because context helps both readers and only costs a little visual noise.
If you are sending this to a build tool, the crop is the first half of the instruction and your comment is the second. Pair a well-framed still with a short, specific note and you have the whole of a screenshot turned into a prompt. This matters most for agent workflows across tools like Cursor and Claude Code, where the model acts on your framing without asking twice.
Failure mode: you crop for yourself, not the receiver. A frame that made sense while you were staring at the live page loses all its landmarks once it is a standalone image. The reader cannot tell which page it is, and the fix stalls on a question you could have answered with a few more pixels of context.
A quick reference for the crop rectangle
| Situation | Crop this way |
|---|---|
| Single broken element | Element plus its nearest label, heading, or neighbor |
| Repeated component (button, card, row) | Include enough surroundings to say which instance |
| Two elements interacting | Both in one frame, or two linked items |
| Sending to a person and an agent | Slightly wider, so both can locate it |
None of this requires an install or a signup. Open a tab, capture the screen, drag the rectangle, and describe what you see. When you are ready to try it on your own screen, start a new review and crop the first still with the receiver in mind.