Using Claude Code Effectively in a Web Project
Claude Code is a teammate that edits your repo — give it scoped tasks, start from a clean branch, and review every diff like a pull request.
Claude Code is Anthropic's agentic coding tool: it reads your files, edits them, runs commands, and checks results. Getting senior-level value out of it is mostly about how you brief it and how you review it.
Write tasks like good tickets
Vague asks ("improve the checkout") force guessing. Scoped asks get usable results: state the goal, the constraints (stack, no new dependencies), the files in play, and how you will know it is done. "Add client-side validation to the signup form in signup.jsx, show inline errors, no new libraries, and run the tests" is a task it can nail on the first try.
Start clean, work on a branch
Begin from a clean git tree on a task branch. Then the whole change is a reviewable diff you can accept, amend, or throw away with one command. If you dislike the result, git checkout main and it is gone.
Review the diff, not just the vibes
Read what changed before committing, exactly as you would a colleague's pull request. Ask it to run the feature and confirm it works — observing real behaviour catches bugs that reading code alone misses. Commit only when you are satisfied.
Example
# 1. Clean, isolated starting point — the diff will be trustworthy.
git status # nothing to commit
git checkout -b add-signup-validation
# 2. Give Claude Code a SCOPED task (typed inside the `claude` session):
# "Add client-side validation to the signup form in src/signup.jsx.
# Show inline error messages, use no new dependencies, and run the
# test suite to confirm nothing breaks."
# 3. Review the change like a pull request before it lands.
git diff # read exactly what changed
npm test # confirm green
# 4. Happy? Commit. Not happy? Throw it away entirely:
git add -A && git commit -m "Add inline validation to signup form"
# ...or: git checkout main && git branch -D add-signup-validationWhen to use it
- Start every Claude Code session from a clean git branch so all AI-generated changes are isolated and reviewable.
- Give Claude Code a numbered task list with acceptance criteria rather than a single vague instruction.
- Run your test suite immediately after Claude Code finishes a task to verify nothing regressed.
More examples
Start from a clean branch
Branching before running Claude Code means all file edits are isolated and reviewable as a normal pull request.
git checkout main
git pull
git checkout -b feature/ai-dark-mode
# Now start Claude Code with a scoped task
claude "Add dark mode using a CSS class on <html>. Use the existing ThemeContext."Give a task with acceptance criteria
Listing measurable acceptance criteria gives Claude Code a clear definition of done to work towards.
claude "Add pagination to the /api/products endpoint.
Acceptance criteria:
- Query params: page (default 1), limit (default 20, max 100)
- Response: { data: Product[], total: number, page: number, totalPages: number }
- Add a Vitest integration test covering page=2
- Do not change the existing response shape for page=1, limit=20"Review and accept Claude Code changes
Reviews the diff, runs tests, and commits only the relevant files — the developer owns the final commit.
# After Claude Code signals it is done:
git diff --stat # see changed files
git diff src/routes/ # read the route changes line by line
npx vitest run # run the test suite
# If everything looks good:
git add src/routes/products.ts tests/products.test.ts
git commit -m "feat: add pagination to /api/products"
Discussion