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

**Author:** Ivan Misic  
**Published:** 2026-01-11  
**URL:** https://ivanmisic.net/blog/ai-tools/workspace-setup-like-a-pro

**In plain English**

Keep Claude Code and the result visible together so you can review each change before asking for the next one.

- Put the terminal on one side and choose a browser, file explorer, or editor for the other side
- A static page normally needs a browser refresh after each edit; live reload works only when you configure it
- Keep each project in its own folder and start Claude Code from that folder so the boundary is clear
- Use `/clear` when the task changes or the context is wrong, and `/compact` when the same long task must continue
- Double-Escape or `/rewind` opens checkpoint recovery when the input is empty; review the available restore choices before using one

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](https://code.visualstudio.com).

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

```bash
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:
```bash
cd "$HOME\Documents\my-website"
```

On macOS or Linux:
```bash
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:

| Command | What It Does |
|---------|-------------|
| `/help` | Shows all available commands |
| `/clear` | Wipes the conversation, starts fresh |
| `/compact` | Summarizes the conversation to free up space |
| `/context` | Shows what is filling the context window right now |
| `/model` | Switch models |
| `/usage` | Shows how much this session has used (`/cost` does the same) |
| `/fast` | Toggles fast mode for quicker replies |

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

| Keys | What It Does |
|------|-------------|
| **Escape** (once) | Interrupts Claude mid-response |
| **Escape** (twice) | With the input empty, opens the rewind menu. With text in the input, clears it |
| **Shift + Tab** | Cycles through the permission modes available in your interface |
| **Tab** | Accept Claude's suggested text (the faded autocomplete) |
| **Ctrl + G** | Write your next message in your normal text editor |

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.