Writing effective prompts for AI coding tools is a skill that dramatically affects output quality. The difference between a vague prompt and a well-crafted one can be the difference between unusable code and production-ready solutions.

The SCRAP Framework for Code Prompts

S — Specify the technology stack Bad: "Create a login form" Good: "Create a login form using React, TypeScript, and Tailwind CSS with Zod validation"

C — Context about the project Bad: "Add authentication" Good: "Add email/password authentication to this Next.js 14 app using Supabase Auth. The app already has a user profile table."

R — Requirements and constraints Bad: "Make it responsive" Good: "Make the dashboard responsive: single column on mobile (<768px), two columns on tablet, three columns on desktop. Use CSS Grid."

A — Anti-patterns to avoid Bad: (no guidance) Good: "Don't use any external state management library. Use React's built-in useState and useContext."

P — Provide examples Bad: "Format the data" Good: "Format dates as 'Jan 15, 2026' and currency as '$1,234.56'. Here's an example input/output: ..."

Inline Completion Tips

For tools like Copilot that offer inline suggestions:

• Write descriptive function names — calculateMonthlyMortgagePayment gives better completions than calc
• Add a comment first — "// Sort users by last login date, most recent first" then let AI complete
• Write the function signature — Type the function name, parameters, and return type before accepting completions
• Start the pattern — Write the first item in a list/object and let AI continue the pattern

Chat/Composer Tips

For conversational AI coding (Cursor Chat, Copilot Chat):

• Reference specific files — "In src/components/UserCard.tsx, refactor the inline styles to use Tailwind classes"
• Show before/after — "Currently the API returns { data: [...] }. Change it to return { users: [...], total: number }"
• Describe the behavior — "When a user clicks 'Delete', show a confirmation modal. If confirmed, call the API and show a success toast"
• Ask for explanations — "Why did you choose useCallback here instead of useMemo?"

Multi-Step Prompting

For complex features, break them into steps:

1. "First, create the TypeScript interfaces for a shopping cart (CartItem, Cart, CartAction)"
2. "Now create a useCart hook using useReducer with add, remove, update quantity, and clear actions"
3. "Create the CartDrawer component that displays items, allows quantity changes, and shows the total"
4. "Add the cart context provider and wrap the app layout"

Common Mistakes

• Too vague — "Make it better" → Be specific about what "better" means
• Too much at once — Asking for an entire feature in one prompt → Break it down
• No error context — "It doesn't work" → Include the error message, expected behavior, and actual behavior
• Ignoring the output — Always review AI-generated code. Don't blindly accept.

Think of AI as a skilled junior developer. Give clear instructions, review the work, and provide feedback. The more context you provide, the better the output.