Set up Claude Code so you can review changes as they happen

I keep Claude Code and the result visible together. On a web project, the terminal stays on one side and the browser or editor stays on the other, so I can review each change before asking for the next one.

Split Your Screen

Put the terminal on one side and the browser, file explorer, or editor on the other.

On Windows:

1. Click on the terminal window
2. Press Windows key + Left Arrow to snap it to the left half
3. Click on your browser or file explorer
4. Press Windows key + Right Arrow to snap it to the right half

On macOS:

1. Hover over the green traffic light button (top-left of a window)
2. Choose "Tile Window to Left of Screen"
3. Click the other window to fill the right side

You can now work in Claude Code and review the result without changing windows after every edit.

What to Put on the Other Side

Choose the second window based on the work:

Option 1: Web browser
If you're building a website, open your HTML file in a browser. Every time Claude makes a change, hit refresh (F5 or Ctrl+R) and see the result immediately.

To open an HTML file in your browser: find the file in your file explorer, right-click it, and choose "Open with" then pick your browser. Or drag the file onto a browser window.

Option 2: File explorer
If you're organizing files, keep the file explorer open to the project folder. Watch files appear, get renamed, or move as Claude works.

Option 3: VS Code (free, optional)
VS Code shows the project tree and file contents in one window, and it updates when Claude changes a file. Use it when you need to inspect code. For a static page, a browser may be enough. Download it at code.visualstudio.com.

To open your project in VS Code, type this in the terminal before starting Claude Code:

code .

The dot means "this folder." VS Code opens with your project loaded.

My Setup

I keep the editor and Claude Code visible together. For static HTML, install Microsoft's Live Preview extension or keep a browser beside the editor. Refresh or use live reload after each change.

Folder Hygiene

I keep each project in its own folder and start Claude Code from there. Starting it in a broad Documents folder makes the project boundary unclear and may include unrelated files.

Documents/
  my-website/          <-- All website files here
    index.html
    about.html
    css/
    images/
  budget-tracker/      <-- Different project, different folder
    tracker.html
    data/

When you want to work on the website, go to my-website before starting Claude Code. When you switch to the budget tracker, open a new terminal and go to budget-tracker.

I keep one session per project so the files and conversation context stay focused. Claude starts with the current directory and its subdirectories, and it can access other locations only when you grant or configure that access.

Quick Navigation

You'll go to project folders a lot. Here are the commands:

In Windows PowerShell:

cd "$HOME\Documents\my-website"

On macOS or Linux:

cd ~/Documents/my-website

cd means "change directory." Basically, "go to this folder." After running this, you're "in" that folder. Now type claude and Claude Code sees the project.

If you forget where you are, type pwd (Mac/Linux) or cd alone (Windows PowerShell). It shows your current folder.

Browser Trick for Web Projects

For a static site, open the HTML file in the browser and refresh it after each change. You can use the browser's address bar to move between pages.

The address will look something like:

file:///C:/Users/You/Documents/my-website/index.html

Replace index.html with about.html in the file URL to move between pages. I use live reload when it is configured, but manual refresh is enough for this workflow.

The Ideal Workflow

My review loop is:

1. Open terminal, go to project folder
2. Split screen: terminal + browser (or VS Code)
3. Type claude
4. Ask Claude to build or change something
5. See the result immediately on the other half of your screen
6. Give feedback ("make the header bigger," "change the blue to green")
7. See the update. Repeat

Commands and Shortcuts

Keep these commands and shortcuts nearby. Use them when the session needs a reset, a shorter context, or an interruption.

Slash Commands

Type these directly into Claude Code:

I use /clear when the task changes or the context is wrong. I use /compact when the same task must continue in a long session. I run /context before either one, because it usually tells me which of the two I need.

Two notes on /model. It takes short aliases rather than version numbers, currently haiku, sonnet, opus, fable, and best, which saves you tracking releases. And in the picker, Enter switches the model and saves it as your default for new sessions, while s switches only this session. Beginners are usually surprised by the first one.

Keyboard Shortcuts

The double-Escape shortcut only opens the rewind menu when the input box is empty. Otherwise it clears what you typed, which is saved to history, so press Up to get it back.

In that menu you pick a point in the conversation and then an action: restore the code, the conversation, or both. It also offers to summarize the conversation before or after that point, which frees context without losing the thread.

Reasoning Effort

Use /effort to choose the reasoning level for the session. For one demanding prompt, ultrathink requests deeper reasoning without changing the session setting.

Phrases such as "think harder" are ordinary instructions, not special Claude Code modes.

Plan Mode

In Plan Mode, Claude can read files and inspect the project but cannot edit source files. Review the proposed plan, keep planning with feedback, or approve it and choose how edits should be handled.

Keep the terminal and result visible, then check each change before you ask for the next one.