Prompting for Code
Vague prompts produce vague diffs. Structure your request like a ticket a senior dev could execute.
The Four-Step Pattern
- Spec — what and why (one paragraph)
- Plan — files to touch, approach, edge cases (ask model to plan first)
- Implement — minimal diff matching the plan
- Test — how to verify (commands, manual steps)
Do not skip straight to implement on multi-file work.
Good Prompt Template
## Goal
Add client-side validation to the signup form in src/components/SignupForm.jsx.
## Stack
Next.js 15 App Router, React 19, existing Zod schemas in src/lib/validation.ts
## Requirements
- Reuse validateSignup from src/lib/validation.ts
- Show field errors below inputs (match LoginForm pattern)
- Do not add new dependencies
## Constraints
- Only modify SignupForm.jsx unless validation.ts needs a small export
- Do not change API routes
## Verify
npm run lint && npm test -- SignupForm
Bad vs Good
Bad: vague
Fix the signup form.
No file, no expected behavior, no boundaries.
Bad: overloaded
Rewrite the auth system to use OAuth, fix the footer, update dependencies,
and add tests. Also improve performance.
Too many goals → over-refactoring and missed requirements.
Good: scoped
In src/components/SignupForm.jsx, disable the submit button until
validateSignup passes. Match the disabled styling used in LoginForm.jsx.
Do not modify other files.
Prompting by Mode
| Mode | Prompt focus |
|---|---|
| Ask | "Explain how X works in this codebase" + @Files |
| Plan | "Propose a plan for X. List files. Do not implement yet." |
| Agent | Paste approved plan + "Implement steps 1–3 only" |
| Debug | Paste full error + "Diagnose root cause. Propose minimal fix." |
Include Failure Information
When debugging, paste:
- Full error message and stack trace
- Command you ran
- What you expected vs what happened
- Relevant code snippet (not the whole file)
Models guess when errors are paraphrased.
Iteration Prompts
After a failed attempt:
The previous change broke npm test -- SignupForm with:
[paste error]
Revert approach X. Try Y instead. Still only modify SignupForm.jsx.