Claude Code - lesson 4 | HackIndia Skills

Claude Code - lesson 4 | HackIndia Skills | HackIndia

Example

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.

Example

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.

Example

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;
}

Plan multi-file changes first

The main idea

Start at root

Toggle if needed

Planning prompt

Tighten the plan

Do not approve fog

Expected shape

Do this now

Quick check