The Problem: Amnesia
The Context File
LLMs (Cursor, Windsurf, Replit) have short memories. They don't "know" your style. They default to generic, outdated code.
You must create a "Context File" (often named .cursorrules, project_rules.md, or pasted into the "Custom Instructions" box). This file acts as the sheet music for the AI. It forces it to play your song.
# IDENTITY
You are a Senior Frontend Engineer.
# TECH STACK
- Next.js 14 (App Router)
- Tailwind CSS (Utility First)
- Supabase (Postgres)
# CONSTRAINTS
- NO CSS files. Use Tailwind.
- NO Class components. Use Functional.
The Solution: Calibration
Don't write the prompt.
Ask the AI to write it.
Most people fail because they don't know what to ask for. The "Calibration Loop" is a specific way of talking to ChatGPT or Claude before you open your code editor.
You treat the AI as a consultant first, and a coder second. You ask it to interview you about your idea until it has enough information to generate its own instructions.
Ingredients & Process
1. Identity
If you don't tell it who to be, it behaves like a junior intern.
2. The Stack
Define the toolbox. Stop it from importing libraries you don't use.
3. Negative Constraints
Telling it what NOT to do is often more powerful than telling it what to do.
The Interview
Never dump a paragraph of text and hope for the best. Force the AI to extract the requirements from your brain.
"I want to build a [APP TYPE]. Act as a Senior Product Manager. Ask me questions, one by one, to clarify the features, user flow, and data structure until you are confident you understand the MVP."
The Stack Negotiation
AI loves outdated libraries. Explicitly ask for the modern "Golden Stack" to ensure compatibility.
"Recommend a tech stack for this. Constraints:
1. Must use Tailwind CSS.
2. Must use Supabase.
3. Prioritize speed of development.
List the exact libraries we will use."
The Artifact: .cursorrules
This is the file you paste into your AI code editor.
You are a Senior Full-Stack Engineer and UX Designer. You prioritize clean architecture, strict typing, and established patterns over experimental features.
# GOAL
Build a [YOUR_APP_IDEA] where users can [CORE_ACTION].
The design aesthetic is minimal, black and white, with thin borders.
# TECH STACK
- Framework: Next.js 14 (App Router), TypeScript, Tailwind CSS
- Backend: Supabase (Postgres, Auth, Edge Functions)
- Icons: Lucide React
- UI Library: Shadcn/UI (Radix Primitives)
- State: React Query (Tanstack)
# CODING RULES
1. Functional Components: Use functional components with hooks. No class components.
2. Styling: Use Tailwind classes exclusively. DO NOT create .css files or modules.
3. Strict Types: Define interfaces for all data structures in a types/ folder.
4. Error Handling: If a bug occurs, explain the root cause first, then provide the fix.
# NEGATIVE CONSTRAINTS
- Do not use useEffect for data fetching; use Server Components.
- Do not use generic div soup; use semantic HTML (section, article, nav).
- Do not invent colors. Use Tailwind's default palette.
- Do not leave "TODO" comments; implement the logic.
💡 Tip: Replace [YOUR_APP_IDEA] and [CORE_ACTION] with your specific project details.
The Prompt Anatomy
A good prompt has layers. Each layer reduces ambiguity and increases output quality.
Role / Persona
WHO IS THE AI?
Define expertise level and personality. A "Senior React Engineer" writes differently than a "Junior Developer."
// Good
"You are a Senior Full-Stack Engineer
with 10 years of React experience."
Context / Background
WHAT'S THE SITUATION?
Give the AI the backstory. What's already built? What are you working on? What's the goal?
// Good
"I'm building a task management app.
Users need to create, edit, delete tasks."
Task / Instruction
WHAT DO YOU WANT?
Be specific. "Make it better" is useless. "Add form validation with Zod" is actionable.
// Good
"Create a login form component
with email/password fields and
Zod validation."
Format / Output
HOW SHOULD IT LOOK?
Tell the AI how to structure the response. Code only? With explanation? Step by step?
// Good
"Return only the code.
No explanations. Use TypeScript."
Formula: Role + Context + Task + Format = Precise Output. The more layers you include, the less the AI has to guess.
Common Pitfalls
These mistakes turn AI into a liability instead of an asset.
The Lottery Prompt
"Make me an app." You're gambling. You'll get random, unusable output every time.
The Novel
A 2000-word prompt isn't better. The AI gets lost. Break complex tasks into small, focused steps.
One Task at a Time
Break work into chunks. Build the form. Then add validation. Then connect to API.
The Exercises
Build your prompt engineering muscle before coding.
The Interview
Extract Requirements
- →Pick an app idea (Todo, Notes, etc.)
- →Ask AI to interview you (10 questions)
- →Answer each question thoughtfully
- →Notice how clarity improves
The Context File
Create Your Rules
- →Create a `.cursorrules` file
- →Define: Identity, Stack, Constraints
- →Add 3 negative rules (what NOT to do)
- →Test it on a simple prompt
The Comparison
See the Difference
- →Prompt: "Make a login form"
- →Save the output
- →Now use full RCTF formula
- →Compare the two outputs
📋 Quick Reference Cheatsheet
The Interview
"Ask me 10 questions about [X]"Stack Lock
"Use only: React, Tailwind, Supabase"Negative Constraint
"Do NOT use CSS files"