Zero-Code AI App BuilderZero-Code AI App Builder
Vibe Coding

Working safely

Plan, review, and approve changes

Claude Code is powerful because it can change your files and run commands. That same power means you need a few safe habits. These habits are what turn vibe coding into reliable building.

What does working safely mean?

Think of a driving instructor with their own brake pedal. The student drives, but the instructor watches the road and can stop the car at any moment.

With Claude Code, you are the instructor. It does the driving. You:

  • Agree on the route first (plan mode)
  • Drive in short stretches (small steps)
  • Check the mirrors (review the changes)
  • Save your progress at every stop (Git commits)
  • Keep your keys in your pocket (never share secrets)
Plan
plan mode
→
Build
one small step
→
Review
read the diff
→
Test
run the app
→
Commit
save a snapshot
The safe building loop. Each lap adds one small, working feature.

Plan first with plan mode

Plan mode is a setting where Claude Code thinks and reads files but does not edit anything. It writes a plan for you to approve.

Press Shift+Tab to cycle through modes. Watch the small label near the input box. Stop when it says plan mode. Then ask:

Prompt
I want to add a search box to the product list page.
Before changing anything, explain your plan:
which files you will change, what each change does, and any risks.

Read the plan. If something looks wrong, say so now. Fixing a plan is much cheaper than fixing code. When you are happy, press Shift+Tab to leave plan mode and tell it to go ahead.

Take small steps

Small steps are easy to check and easy to undo. Big steps hide problems.

Prompt
// Wrong
Add search, filters, sorting, pagination, and a wishlist.

// Right
Add a search box that filters the product list by name. Nothing else for now.

Review the changes

A diff is a view that shows exactly what changed in a file. Removed lines are usually red. Added lines are usually green.

Claude Code shows you a diff in the permission prompt before it edits a file. You can also see all changes in VS Code. Click the Source Control icon in the left sidebar and click any changed file.

You don't need to understand every line. Look for surprises:

  • Did it change files you didn't expect?
  • Did it delete a lot of code?
  • Does any line contain something that looks like a key or password?

If you're unsure, ask:

Prompt
Walk me through every file you changed in the last step and why.

Commit after each working step

A commit is a save point. If the next step breaks something, you can go back. Once the app works, ask Claude Code to commit for you:

Prompt
The search box works. Commit these changes with a clear message.

It will run git add and git commit, and ask permission first. Check the history any time with:

bash
git log --oneline
Commit only when the app works. A history full of working save points is your safety net.

Never paste secrets into the chat

A secret is anything that gives access to an account: API keys, passwords, database keys. Treat them like your house keys.

  • Put secrets in .env.local yourself, using VS Code
  • Tell Claude Code the name of the variable, not the value
  • Make sure .gitignore lists .env.local
Prompt
// Wrong
My Stripe key is sk_test_51Habc... please add it to the app.

// Right
I added STRIPE_SECRET_KEY to .env.local. Use it only in server-side code.

Don't approve blindly

Permission prompts are your brake pedal. Read each one before you press Enter. Be extra careful with commands that delete files, push to GitHub, or change settings outside your project.

Choosing "Yes, and don't ask again" is handy for safe actions like editing files. Avoid it for commands you don't recognize. If a command looks strange, choose No and ask "What does this command do?"

Common mistakes

  • Pressing Yes on autopilot. One bad approval can delete work. Read first.
  • Going hours without a commit. When something breaks, you have nowhere safe to return to.
  • Skipping the plan for big features. Use plan mode whenever a change touches more than one or two files.
  • Pasting error messages that include keys. Delete the key part before you share an error.

Practice

Try these exercises to lock in what you just learned.

Quiz
Not started
You want Claude Code to explain how it would add a search box without changing any files yet. What should you use?
Quiz
Not started
Claude Code needs your Stripe test key. What is the safe way to give it?
Quiz
Not started
When is the best time to commit?

What's next?

You now know how to work with Claude Code safely. Next, let's look at what it takes to build a complete app, with pages, data, login, and more.