Claude Code Agent

Before building your first feature, get familiar with Claude Code's core flows: the agent, plan mode, referencing files, choosing a model, and stopping or undoing a run. This is the toolkit behind the build loop you'll use everywhere – plan, build, preview, refine, ship.

What you'll gain

• A quick mental model of the Claude Code interface and modes.
• Confidence using plan mode to shape work before any code is written.
• The ability to stop a run and roll back safely.

1. The Main Areas of Claude Code

Get oriented with the interface you'll use constantly. See the official docs for deeper reference: Claude Code docs.

  • Chat panel
    • Where you talk to the agent – describe a task, answer its questions, approve its changes.
  • File view / diffs
    • Claude shows you the exact edits it proposes before applying them. Review, then accept or reject.
  • Commands / Output
    • Claude runs commands for you (installs, dev server, git) and reads the output to fix problems. You don't type commands yourself – you watch what Claude runs and what comes back.
  • Model picker
    • Switch the model powering the agent. Sonnet is the everyday default; Opus for harder, multi-step work.
Auto-accept mode

Press Shift+Tab to cycle modes. Auto-accept lets Claude apply edits without asking each time – faster once you trust the task. It always pauses before anything risky. Start cautious, speed up as you gain confidence.

Outcome: You can navigate the chat, review diffs, follow the commands Claude runs, and switch models.

I can navigate the chat, diffs, command output, and model picker

2. Plan first, then build

Claude Code can either jump straight into building, or plan first and let you approve the approach before it touches any code. For anything beyond a tiny change, plan first.

Guidance:

  • Use plan mode (Shift+Tab to reach it) to have Claude lay out an approach before it writes code.
  • Approve or redirect the plan, then let the agent execute it (auto-accept speeds this up).
  • Keep each task small and scoped – one feature or change at a time – and review edits before they land.

Outcome: You know when to plan versus build, and you default to planning for anything non-trivial.

I plan before building and review the plan first

3. Referencing Files and Docs

Give Claude context by pointing it at the right files. Reference a file with @ in the chat and Claude pulls it in. Pointing it at your concept keeps it aligned with what you're building.

Examples:

  • "Build this feature based on @docs/idea/concept.md."
  • "Update the component in @src/app we were just working on."

Tips:

  • Reference the specific files or folders relevant to the task.
  • Keep secrets out of prompts; never paste env variables or API keys.

Outcome: Your prompt includes the exact context the agent needs.

I gave Claude context by referencing files with @

4. Stop and Undo

If the agent goes off track, stop it and roll back.

Workflow:

  • Press Esc to interrupt the current run immediately.
  • Review proposed diffs before accepting; reject anything heading the wrong way.
  • Use Claude Code's rewind to return to an earlier checkpoint in the conversation and the code.
  • Use git (next lessons) to discard or stage changes intentionally.

Outcome: You can stop a run that's going wrong and safely return to an earlier state.

I can stop the agent and rewind to a previous state

5. Find the Right Place to Change

Help the agent aim before it edits.

Tips:

  • Ask Claude to find where something lives ("where is the pricing section rendered?") – it searches the codebase for you.
  • Name the file or folder when you already know it, so the agent doesn't guess.
  • Skim related files before a big change to reduce mis-edits.

Outcome: You can quickly locate the files and code the agent should work on.

I can locate the right places to change