Claude Code
A tight prompt says what to change, where to change it, what not to touch, and how you will check it.
Claude Code can see your current branch, uncommitted changes, recent commits, CLAUDE.md, and files in the project directory. Reduce guesswork before you approve edits.
0 of 7 lessons done · proved by a submitted project with a public repository
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
git status
claudeUse five parts: goal, allowed files, constraints, expected behavior, and check command.
Do not ask Claude to “improve checkout”. Ask for one behavior you can review in a diff.
This example is for a Vite React cart page in a campus snack ordering demo. The same shape works for your own app.
Implement one small change only.
Goal: On the cart page, show a free-delivery message when the cart total is ₹499 or more.
You may edit only:
- src/components/CartSummary.jsx
- src/components/CartSummary.test.jsx
Do not edit package.json, routing, CSS framework config, or payment code.
Follow the existing component style. Keep the rupee formatting already used in this file.
Expected behavior:
- If total is 499 or above, show: Free delivery unlocked
- If total is below 499, show: Add ₹X more for free delivery
- X should be 499 - total
Add or update tests for totals 498 and 499.
Before editing, restate the files you will change and the test command you expect me to run.Use Manual mode when you are still learning. It asks before edits or commands and shows diffs for approval.
Accept edits can be faster for simple file edits, but it still asks before other terminal commands. Do not use bypass permissions as a normal shortcut; use it only in a sandboxed container or VM.
Before approving, check that Claude stayed inside the two allowed files. If it edits package.json or refactors the cart flow, stop and restate the scope.
// src/components/CartSummary.jsx
export default function CartSummary({ total }) {
const freeDeliveryMinimum = 499;
const amountNeeded = freeDeliveryMinimum - total;
const deliveryMessage =
total >= freeDeliveryMinimum
? "Free delivery unlocked"
: `Add ₹${amountNeeded} more for free delivery`;
return (
<section aria-label="Cart summary">
<p>Total: ₹{total}</p>
<p>{deliveryMessage}</p>
<button>Continue to pay</button>
</section>
);
}
// src/components/CartSummary.test.jsx
import { render, screen } from "@testing-library/react";
import CartSummary from "./CartSummary";
test("shows the cart total", () => {
render(<CartSummary total={250} />);
expect(screen.getByText("Total: ₹250")).toBeInTheDocument();
});
test("shows amount needed when total is below free delivery minimum", () => {
render(<CartSummary total={498} />);
expect(screen.getByText("Add ₹1 more for free delivery")).toBeInTheDocument();
});
test("shows free delivery message when total reaches minimum", () => {
render(<CartSummary total={499} />);
expect(screen.getByText("Free delivery unlocked")).toBeInTheDocument();
});“Add checkout” is too broad. Break it into one visible behavior, one route, or one validation rule.
Do not approve secret reads, .env access, unexpected installs, or broad rewrites during a small task. You are responsible for what enters your public repo.
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
npm test
git diff -- src/components/CartSummary.jsx src/components/CartSummary.test.jsx
git status
git add src/components/CartSummary.jsx src/components/CartSummary.test.jsx
git commit -m "Add free delivery message to cart summary"}],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
git status
claudeUse five parts: goal, allowed files, constraints, expected behavior, and check command.
Do not ask Claude to “improve checkout”. Ask for one behavior you can review in a diff.
This example is for a Vite React cart page in a campus snack ordering demo. The same shape works for your own app.
Implement one small change only.
Goal: On the cart page, show a free-delivery message when the cart total is ₹499 or more.
You may edit only:
- src/components/CartSummary.jsx
- src/components/CartSummary.test.jsx
Do not edit package.json, routing, CSS framework config, or payment code.
Follow the existing component style. Keep the rupee formatting already used in this file.
Expected behavior:
- If total is 499 or above, show: Free delivery unlocked
- If total is below 499, show: Add ₹X more for free delivery
- X should be 499 - total
Add or update tests for totals 498 and 499.
Before editing, restate the files you will change and the test command you expect me to run.Use Manual mode when you are still learning. It asks before edits or commands and shows diffs for approval.
Accept edits can be faster for simple file edits, but it still asks before other terminal commands. Do not use bypass permissions as a normal shortcut; use it only in a sandboxed container or VM.
Answer the quick check to finish this lesson.