Set up your AI for a vibe-coded web app in 10 minutes

Vibe coding is great until the AI swaps your framework halfway through, invents a backend you didn't ask for, and commits your API key. Ten minutes of setup before the first prompt prevents almost all of that. Here's the routine.

1. Start a git repo (1 minute)

Git is your undo button for AI mistakes. Do this before any code exists:

mkdir my-app && cd my-app
git init
printf "node_modules/\ndist/\n.env\n.env.*\n.DS_Store\n" > .gitignore
git add .gitignore && git commit -m "Initial commit"

From now on, commit every time something works. If the AI breaks things, git diff shows exactly what changed and you can roll back.

2. Write the pitch (1 minute)

One paragraph. What it does, who it's for, what v1 must include, and what it must not include yet. The "not yet" list is what stops scope creep:

## Project overview
A leaderboard site for my friends' Mario Kart time trials.
Users pick a track and submit a time with a screenshot link.
v1: track list, submit form, leaderboard per track, mobile-friendly.
Not in v1: accounts, comments, image uploads.

3. Pin the stack (1 minute)

If you don't choose, the AI chooses, and it may choose differently tomorrow. Pick something and write it down with versions. For a first project, the simplest stack you can deploy is best:

## Tech stack
- Plain HTML, CSS, and vanilla JavaScript (ES modules). No framework.
- Vite for the dev server and build
- Data: a JSON file in /data for v1 (no database yet)
- Hosting: Cloudflare Pages (static)

Not sure about versions? Check your package.json after installing and copy the major versions in.

4. List the commands (1 minute)

## Commands
- Install: `npm install`
- Dev server: `npm run dev`
- Build: `npm run build` (outputs to dist/)
- Preview the build: `npm run preview`

Now the AI can run and check its own work instead of guessing.

5. Map the folders (1 minute)

## Structure
- index.html: entry page
- src/: JavaScript modules (one feature per file)
- src/styles/: CSS
- data/: JSON data files
- public/: static assets copied as-is (images, favicon)

6. Always and never (2 minutes)

Keep these short and specific. These are the ones that save vibe coders the most pain:

## Always
- Make small changes and tell me which files you touched
- Mobile-first: everything must work at 375px wide
- Use semantic HTML and label every form field
- Ask a question if my request is ambiguous

## Never
- Add a framework, UI library, or npm package without asking
- Rewrite or reformat files you weren't asked to change
- Add a backend, database, or login system unless I ask
- Delete files without asking

7. Security rules (1 minute)

This is the part most people skip, and the one that hurts most when it goes wrong:

## Security
- Never put API keys, tokens, or passwords in code, docs, or commits.
  Secrets go in .env (gitignored) or the host's environment settings.
- Anything in front-end JavaScript is public. Never put a secret there,
  even "temporarily". Calls that need a secret go through a server
  function.
- Only the dist/ folder gets deployed. Never deploy the project root.
- Validate and escape anything users type before displaying it.

8. Define "done" (30 seconds)

## Definition of done
- `npm run build` passes with no errors
- No errors in the browser console
- Works on a phone-sized screen
- I can explain what changed from your summary

9. The first prompt (1 minute)

Save all of the above as your brain file (AGENTS.md, CLAUDE.md, GEMINI.md, or your tool's format; see which one). Then start with a plan, not code:

Read AGENTS.md first. Then give me a short plan for v1 as a numbered
list of small steps, each one something I can test in the browser.
Don't write any code yet. Wait for me to approve the plan.

Approve the plan, then go one step at a time: build, test it yourself, commit, next. When the AI makes the same mistake twice, add a rule to the brain file. That's the whole loop.

Want it faster?

The Brain File Generator has a "Web app" preset that fills most of this in. Adjust it to your project and download it in your tool's format. Then read the long-term memory guide so your AI remembers decisions across weeks, not just sessions.