Reading a diff

Last lesson, Claude proposed a change and the preview pane lit up with green and red lines. That pane is the most important thing on your screen.

A diff is the line-by-line picture of what’s about to change. Green lines are being added. Red lines are being removed. The plain lines around them are context — they show you where in the file the change lands. Read it, then click Accept or Reject.

That’s the whole format. Claude Code Desktop draws it for you as a side-by-side visual diff, and it’s the same format git, GitHub, and every code-review tool on earth use. Learn to read one once and you can read all of them.

See it for yourself

Edit the text below and watch the diff appear, line by line, the way it does in Claude’s preview pane. Green is what you added; red is what you took out.

Notice the rule: nothing about the original is “changed” until a line is actually different. The lines you left alone stay plain — that’s context. The lines you touched turn green and red. That’s the entire vocabulary.

A worked example

Here’s the kind of diff Claude shows when it proposes a code change:

 function greet(name) {
-  return "hi " + name;
+  return `Hello, ${name}!`;
 }

Three lines matter. The function greet(name) line is context — plain, just showing where you are. The red line (with −) is being removed. The green line (with +) is being added.

So the change is: replace the old return statement with a new one. The function name and signature aren’t changing — those are context. In the app, this is exactly what you’d skim in the preview pane before clicking Accept.

The trap: scanning vs reading

Most people glance at a diff. They see a few green lines, a few red lines, the names look about right, and they hit Accept.

That’s not reading. That’s nodding.

Claude can be confidently wrong. It can rename a variable correctly in five places and forget the sixth. It can add the line you asked for and also delete one you didn’t. The diff shows you that. The diff is the truth. The diff is what’s actually about to happen the moment you click Accept.

When the diff is more than ten or fifteen lines, slow down. Read each green and each red line. Ask yourself: did I ask for this? If the answer is no, that’s the catch — and Reject is right there.

Don’t read the summary, read the diff

Claude will usually summarize a change in plain English in the chat, above the diff. Something like:

I’ve updated the headline in index.html.

That sentence is interpretation. The diff is reality. Sometimes they match. Sometimes the diff also moved a line, or removed something you didn’t mention, or fixed a typo Claude noticed in passing. The summary won’t always say so.

Read the diff. Always. The chat message is a hint; the diff is the contract — and the contract isn’t signed until you click Accept.

Try one

Here’s a small diff. Read it before you scroll to the quiz.

 const total = items.reduce((sum, item) => {
-  return sum + item.price;
+  return sum + item.price * item.quantity;
 }, 0);

What’s next

You can now read what Claude proposes in the preview pane and decide Accept or Reject. The next lesson is what to do when what Claude proposes is almost right but not quite. The skill is keeping the conversation going instead of starting over.