The four essential components

Every good prompt has four key parts. Think of them as the building blocks:

Context

What it is: Background information the AI needs to understand the situation.

Why it matters: Without context, the AI makes assumptions that might be wrong.

❌ Weak: "Write some code"

✅ Strong: "I'm building a React e-commerce app with TypeScript.
           The app uses Stripe for payments and needs to handle 
           cart state management."

Instruction

What it is: The specific task you want the AI to perform.

Why it matters: Vague instructions produce vague results.

❌ Weak: "Make this better"

✅ Strong: "Refactor this function to use async/await instead of 
           callbacks, add error handling, and include JSDoc comments"

Examples (Few-Shot)

What it is: Showing the AI exactly what you want with concrete examples.

Why it matters: Examples are worth a thousand words of description.

Input: "Convert these to camelCase"

Examples:
user_name → userName
created_at → createdAt

Now convert: last_login_date →

Output Format

What it is: Specifying exactly how you want the response structured.

Why it matters: Different tasks need different formats (code, JSONWhat is json?A text format for exchanging data between systems. It uses key-value pairs and arrays, and every programming language can read and write it. Ask AI for more, bullet points, paragraphs).

❌ Weak: "List the steps"

✅ Strong: "Provide the answer as a numbered list with exactly 5 steps.
           Each step should be one sentence."

The CO-STAR framework

CO-STAR is a structured method for writing prompts, developed by Singapore's GovTech. It ensures you cover all the important elements:

CO-STAR in action

Task: Write a technical explanation

Context: I'm preparing documentation for my team's internal wiki.
         We just adopted TypeScript and some developers are 
         struggling with type definitions.

Objective: Explain when to use 'interface' vs 'type' in TypeScript.

Style: Clear, practical, with code examples.

Tone: Helpful and patient.

Audience: Mid-level JavaScript developers new to TypeScript.

Response: Start with a quick summary table, then detailed 
          explanations with code snippets. End with a 
          decision flowchart.

Prompt structure best practices

Be specific, not clever

Don't try to trick the AI with clever phrasing. Be direct and explicit.

❌ "Can you perhaps maybe explain this thing about React?"

✅ "Explain the React useState hook, including:
    - What problem it solves
    - Syntax with an example
    - Common mistakes to avoid"

Use delimiters for complex prompts

When your prompt has multiple parts, use clear delimiters:

Review this code for security issues:

function authenticate(user, password) {

// code here

}

Requirements:
1. Check for SQL injection vulnerabilities
2. Look for insecure password handling
3. Suggest specific fixes

Put constraints upfront

If you have important constraints, state them early:

Important constraints:
- Must work with Node.js 18+
- No external dependencies
- Max 50 lines of code

Task: Write a function that validates email addresses.

Break complex tasks into steps

For multi-step problems, ask the AI to think step by step:

Build a React component for a shopping cart.

Follow these steps:
1. First, define the TypeScript interfaces
2. Then, create the component structure
3. Add the state management logic
4. Finally, add styling with Tailwind

Common mistakes to avoid

Being too vague

The mistake: "Help me with JavaScript"

The fix: "I'm trying to fetch data from an APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more in JavaScript. The fetch works but I'm not sure how to handle errors properly. Can you show me a pattern with try/catch?"

Forgetting the audience

The mistake: Not specifying who the output is for

The fix: "Explain this for someone with 6 months of Python experience" or "Write this for senior engineers"

Not specifying format

The mistake: "Tell me about RESTWhat is rest?An architectural style for web APIs where URLs represent resources (nouns) and HTTP methods (GET, POST, PUT, DELETE) represent actions on those resources. Ask AI for more APIs"

The fix: "Give me a 3-paragraph explanation of REST APIs, followed by a table comparing REST to GraphQLWhat is graphql?A query language for APIs where clients specify the exact shape of data they need in a single request, avoiding over-fetching and under-fetching. Ask AI for more"

Overloading the prompt

The mistake: Asking for 10 different things at once

The fix: Break into multiple prompts or ask for a structured response with clear sections

Not providing examples

The mistake: Describing what you want in words only

The fix: Include 1-2 examples of the exact format or style you want

Good vs bad prompts: examples

Example 1: Code generation

❌ Bad prompt:

Make a login form.

Result: Generic HTML form with no styling, validation, or error handling.

✅ Good prompt:

Create a React login form component with these requirements:

Context:
- Using React 18 with TypeScript
- Tailwind CSS for styling
- React Hook Form for form management

Features needed:
1. Email and password fields with validation
2. Show validation errors inline
3. Loading state during submission
4. Error message display for API errors

Output:
- Full component code with TypeScript types
- Comments explaining the React Hook Form integration
- Example usage

Result: Production-ready code matching your stack and requirements.

Example 2: Debugging help

❌ Bad prompt:

My code doesn't work. Help?

Result: Generic debugging advice with no specific help.

✅ Good prompt:

I'm getting an error in my React app. Here's the situation:

Error message: "Cannot read property 'map' of undefined"

Component code:

What I've tried:
- Added console.log(users) - it shows undefined initially
- The fetch returns data successfully

Please:
1. Explain why this error occurs
2. Show me the fix
3. Explain the pattern to prevent this in the future

Result: Specific diagnosis (missing initial state), the exact fix, and prevention pattern.

Example 3: Learning explanation

❌ Bad prompt:

Explain async/await

Result: Generic explanation that might be too basic or too advanced.

✅ Good prompt:

Explain JavaScript async/await to me:

My background:
- I know promises and .then()
- I understand callbacks
- I'm confused about when to use async/await vs promises

Please provide:
1. A simple analogy for the core concept
2. Code showing the same logic with promises vs async/await
3. When to choose one over the other
4. Common pitfalls beginners face

Result: Targeted explanation at your level with practical comparison.

Quick reference: prompt structure

Mastering prompt structure takes practice. Start with the four essential components (context, instruction, examples, format), use CO-STAR for complex tasks, and always be specific rather than clever. Your future self will thank you when you get exactly what you need on the first try.