Vibe Coding cheat sheet

A scannable Vibe Coding reference: 26 short snippets across 12 topics, each linking back to the lesson it came from.

At a glance

Quick snippets

The vibe coding practice

What the loop looks like

> make the signup form reject disposable email domains and show an inline error
  (edits validation.ts and SignupForm.tsx, adds a test)

> npm test
  FAIL validation.test.ts: expected "blocked", received "ok"

> the check runs before the domain is lowercased - fix the order
  (reorders the pipeline, re-runs, one test still failing)

> the error text needs an aria-live region so screen readers announce it
  (wraps the message, all tests pass)

Full lesson: The vibe coding practice →

When it works and when it fails

Conditions for success

# wire the loop before you write the prompt
npm run typecheck -- --watch &
npm test -- --watch &
npm run dev

# then ask for changes you can verify immediately
# "render the empty state when items.length is 0"

Full lesson: When it works and when it fails →

Prompting for intent, not syntax

Iterate on the prompt, do not restart

> That is close, but two problems:
> 1. The token helper now takes a third argument. I said not to change
>    the existing signature - add an overload instead.
> 2. The test asserts on the response body. Assert on status only;
>    the body is deliberately identical.

> Keep everything else you did.

Full lesson: Prompting for intent, not syntax →

The generate, run, correct loop

The loop

# the agent should run this, and you should read the result
npm test -- cart.test.ts
npm run typecheck
npm run dev          # then actually click through the flow

# when a command is noisy, cap what enters the context
npm test 2>&1 | tail -40

Sizing the increment

git add -p && git commit -m "cart: reject quantity above stock"

# next increment, as its own commit
# "now make the error message name the item that is short"

Verifying in the real interface

Do not stop at "the tests pass".

Check, in the running app:
- Empty state: what renders with no data
- Loading: is there a spinner or a flash of wrong content
- Error: does a failed request show something a user can act on
- Boundary: zero, one, many; very long strings
- Refresh: does the state survive, or reset confusingly

Full lesson: The generate, run, correct loop →

Choosing a stack that agents handle well

Constraints that help

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "exactOptionalPropertyTypes": true
  }
}

Constraints that help

"Follow the pattern in src/features/orders. New features must have
the same shape: route, schema, repository, test. Do not invent a
different structure."

Full lesson: Choosing a stack that agents handle well →

Version control as your safety net

Commit before the agent starts

# before asking for anything
git status --short
git add -A && git commit -m "checkpoint before agent session"

# or, if the work is not ready to commit
git stash push -u -m "wip before agent session"

# after a bad run
git checkout -- .
git clean -fd

Read the diff

# what did the agent actually change?
git diff --stat
git diff

# just the files, when the diff is large
git diff --name-only

# stage selectively instead of accepting everything
git add -p

Branches and commit shape

# one experiment, one branch, one intent
git switch -c experiment/new-checkout-flow

# after a good increment
git add -p
git commit -m "checkout: validate stock before creating the order"

# abandon without touching main
git switch main && git branch -D experiment/new-checkout-flow

Full lesson: Version control as your safety net →

Specs and tests as the contract

The requirement comes first

Requirement: a discount code applies once per customer.

Acceptance criteria:
- Applying a used code returns 409 with code ALREADY_REDEEMED.
- Applying an expired code returns 409 with code EXPIRED.
- Applying an unknown code returns 404.
- The discount is applied to the subtotal, before tax.
- Codes are case-insensitive and trimmed.

Red to green

import { test, expect } from "vitest";
import { applyDiscount } from "./discount";

test("rejects a code that has already been redeemed", () => {
  const result = applyDiscount({ code: "SAVE10", redeemedBy: ["user_1"] }, "user_1");
  expect(result).toEqual({ ok: false, error: "ALREADY_REDEEMED" });
});

test("trims and lowercases the code before lookup", () => {
  const result = applyDiscount({ code: "  save10  " }, "user_2");
  expect(result.ok).toBe(true);
});

Red to green

npm test -- discount.test.ts
# FAIL  src/discount.test.ts
# Error: Cannot find module './discount'

# now, and only now:
> "Implement src/discount.ts so these tests pass. Do not modify the tests."

Full lesson: Specs and tests as the contract →

Types, linters and static checks as the first filter

Types catch the mechanical errors

npx tsc --noEmit          # the fastest signal available
npx tsc --noEmit --pretty false   # compact output, easier to paste into a prompt

Wiring the checks into the loop

{
  "scripts": {
    "check": "npm run typecheck && npm run lint && npm test -- --run",
    "typecheck": "tsc --noEmit",
    "lint": "eslint . --max-warnings 0"
  }
}

Wiring the checks into the loop

"Before you report a task complete, run npm run check and show me
the output. If it fails, fix it and run it again."

Full lesson: Types, linters and static checks as the first filter →

Reviewing generated code like an owner

Tracing what it touched

# what did it depend on?
git diff --stat
git diff package.json

# who else calls the function it changed?
grep -rn "applyDiscount" --include=*.ts .

# which tests actually exercise the new branch?
npm test -- --coverage --collectCoverageFrom='src/discount.ts'

When to delete and rewrite

git restore src/discount.ts          # drop just this file
git checkout HEAD -- src/features/   # reset a whole directory
git switch main && git branch -D experiment/x

Full lesson: Reviewing generated code like an owner →

Debugging when the agent goes in circles

Reduce to a minimal reproduction

# the failing case, isolated, outside the app
mkdir /tmp/repro && cd /tmp/repro && npm init -y
npm i <the-one-library>
node repro.mjs

# the failing test, narrowed
npx vitest run -t "rejects a redeemed code"
npx playwright test cart.spec.ts --grep "stock"

Reduce to a minimal reproduction

git bisect start
git bisect bad HEAD
git bisect good v1.4.0
git bisect run npm test -- cart.test.ts
git bisect reset

Full lesson: Debugging when the agent goes in circles →

Security, secrets and dependencies

Credentials

Bad prompt:
"Connect to postgres://admin:[email protected]:5432/prod and add the index"

Better:
"Add a migration for an index on orders.created_at.
Use the connection from DATABASE_URL, which is already in the environment.
Do not print or log the connection string."

Added dependencies

git diff package.json package-lock.json

# is this package real, and is it the one you meant?
npm view <package> repository homepage maintainers time.modified

# what will it pull in?
npm ls --all | wc -l
npm audit --omit=dev

Added dependencies

"Before adding any dependency, tell me what it is for and what it pulls
in. If it can be done in twenty lines of code we already have, do that
instead."

Full lesson: Security, secrets and dependencies →

Shipping, documenting and maintaining an agent-built project

Authorship and review

PR description:

Written with an agent from this prompt:
  "Add rate limiting to /api/public/*: 60 requests per minute per
   token, using the existing redis client, returning 429 with
   Retry-After. Log the token id, never the token."

I have read the diff and verified: 429 on the 61st request, the header
is present, and the log line contains no token value.
Not verified: behaviour under multiple instances.

Paying down generated debt

Rewrite when:
- Every new feature touches the same three files in the same painful way.
- The tests cannot be made meaningful without rewriting them first.
- Nobody can predict what a change will break.

Refactor instead when:
- The behaviour is right and only the shape is wrong.
- There is a clear extraction that would fix several symptoms.

Full lesson: Shipping, documenting and maintaining an agent-built project →

FAQ

Related cheat sheets

AI Basics AI Agents Math for AI Machine Learning scikit-learn TensorFlow

Last refreshed 2026-09-27.