AI coding agents like Claude Code, Codex and Cursor are fast at changing code. They are slow at guessing. Every gap in your report turns into a search through files, a wrong fix, or a question back to you. A good report closes the gaps before they open.
The template
Select the block below, copy it into a note, and fill it in each time. Delete any line you can't fill.
Page/URL: (address, like localhost:3000/settings)
What I did: (what you clicked or typed, in order)
What I expected: (what should have happened)
What happened: (what you saw instead)
Scope: (only this page / everywhere this appears)
Element: (the button, card or field, by its visible text or position)
Errors: (red lines from the browser console, as text)
Screenshot path: (like screenshots/save-button.png, broken part boxed)The screenshot path line is there because a file in your project always reaches the agent, even when pasting an image fails. If paste is giving you trouble, see why a screenshot won't paste into Claude Code or Cursor.
Each line, and why the agent needs it
Page/URL
The address is the cheapest clue there is. Routes usually match file or folder names, so /settings points the agent at a settings page file before it searches anything.
What I did
Write them like a recipe. "Add two items, open the cart, change the first to 3." Even an agent that can open a browser starts on a fresh page, so the steps are how it gets to the state yours was in.
What I expected
This is the line that matters most. "Total should be $60" gives the agent a target it can test against. If it should look like something else in the app, say so: "like the cards on the home page".
What happened
Describe, don't diagnose. "The total stayed at $20" is better than "the state is broken". Your guess at the cause can send the agent the wrong way.
Scope
"Only on this page" or "every button like this". Without it, agents either ask, or pick one and sometimes pick wrong. See why your agent asks if a change is local or global.
Element
Name the exact thing that's wrong, by what it says or where it is: "the Save plan button under the cards". A page often has several buttons that look alike, and the agent can search the code for visible text.
Errors
Paste error text, not a picture of it. Text is exact and the agent can search for it. Here is how to copy console errors.
Screenshot path
A screenshot with the broken part boxed or circled, saved in your project, with its path in the report. You can paste the image too, but a path works in every terminal. Add your browser and screen size if it might matter. What browser am I using? copies all of that in one click.
A bad report and a good one
Bad:
the settings page is broken pls fixGood:
Page/URL: localhost:3000/settings
What I did: changed Display name to "Sam", clicked Save
What I expected: name saves and a "Saved" message shows
What happened: nothing. After reload the old name is back.
Scope: only this form
Element: the Save button at the bottom of the Profile card
Errors: TypeError: Cannot read properties of undefined (reading 'id')
Screenshot path: screenshots/settings-save.png (Save button boxed)The second one takes a minute to write and usually saves several rounds of back and forth.
Common mistakes
- Several bugs in one message. Send one at a time, or number them clearly.
- "It doesn't work." Doesn't work how? Nothing happens, wrong result, error, or looks wrong?
- Leaving out what you already tried. If you reloaded or cleared the cache, say so.
- Pasting secrets. Logs and screenshots can hold API keys and tokens. Remove them before you paste.
Let Darnly write most of it
Darnly is a free Chrome extension that fills in most of this template for you. Press Option+Shift+B (Windows is coming soon), click the broken part, and type the Expected line. Darnly adds the page address, a screenshot with the element boxed in red, the element's selector, text, HTML and styles, console errors and failed requests from the last 60 seconds, and the What I did part: your last few clicks and pages (where you typed, never what you typed). Secrets are replaced with [hidden].
The report is saved as markdown and a PNG in .darnly/inbox/ in your project, with a short note in AGENTS.md so Claude Code, Codex or Cursor knows to look there. You still write the two lines only you know: what you expected, and the scope. Put both in the note box.