The main idea
For uncertain or multi-file work, use this order: explore, plan, implement, commit.
Plan mode lets Claude read files and propose a plan without editing source files until you approve. Your job is to make the future diff predictable.
Start at root
Open Claude Code from your project root. Claude can access files in that directory and subdirectories. It can also see git state, including your current branch, uncommitted changes, and recent commits.
Check your repo first. If you have lab work or teammate changes sitting uncommitted, know that before you ask Claude to plan.
git status
claude --permission-mode planToggle if needed
You can also enter Plan mode during a session. Press Shift+Tab until the status bar shows Plan mode on.
Use this before a feature touches a route, component, helper, test, or README. It is slower than guessing, but faster than cleaning up random edits.
Planning prompt
A weak prompt says, “Add bookings.” A better prompt names the outcome, files to inspect, constraints, and says not to edit yet.
This example keeps the canteen app small: one menu item, one pending order, no backend.
Prompt to Claude in Plan mode:
We are adding a simple canteen pre-order flow.
Do not edit files yet.
First inspect these files:
- package.json
- src/App.jsx
- src/pages/Menu.jsx
- src/lib/orders.js
- src/lib/menu.js
Then propose a plan for the smallest working change that lets a student select one menu item and create a pending order.
Constraints:
- Keep existing component style.
- No backend yet.
- Store orders in localStorage through src/lib/orders.js.
- Include any test or manual check I should run.
Reference the exact files you plan to change.Tighten the plan
In Plan mode, use Ctrl+G to open the plan in a text editor. Cut vague steps. Add boundaries Claude must not cross.
A good plan names exact files, explains the small change, and includes a check you can run before committing.
Before plan:
1. Add order management.
2. Update the menu UI.
3. Improve styling.
4. Add storage and tests if needed.
After editing with Ctrl+G:
1. In src/lib/orders.js, implement getOrders() and createOrder(item) using localStorage key "canteen_orders".
2. In src/pages/Menu.jsx, add a button beside each item that calls createOrder(item).
3. In src/pages/Menu.jsx, show "Order saved" after a successful click.
4. Do not add new dependencies.
5. Do not change routing, package.json, or src/lib/menu.js.
6. Manual check: run the app, click Order on Poha, refresh, and confirm getOrders() still returns the saved order.Do not approve fog
Do not approve a plan that says “improve UI” or “add order management” without file names. Ask Claude to revise it.
For the canteen example, you expect changes in src/lib/orders.js and src/pages/Menu.jsx. If Claude later wants to change package.json, routing, or unrelated CSS, stop and ask why.
Expected shape
The final code can differ, but the shape should match the plan: a localStorage helper and a small UI action.
You will review the actual diff in a later lesson. For now, make the plan clear enough that review is easy.
// src/lib/orders.js
const STORAGE_KEY = "canteen_orders";
export function getOrders() {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved) : [];
}
export function createOrder(item) {
const order = {
id: crypto.randomUUID(),
itemId: item.id,
itemName: item.name,
price: item.price,
status: "pending",
createdAt: new Date().toISOString()
};
const orders = [...getOrders(), order];
localStorage.setItem(STORAGE_KEY, JSON.stringify(orders));
return order;
}Do this now
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done