Basic components of an effective prompting

The 3 basic components of an effective prompt are:

1) Role (Who the AI should act as)

This tells the AI what perspective or expertise to use while answering.

Examples:

• “Act as a senior Angular architect…”
• “You are a financial advisor…”
• “Act as a Git expert…”

Why it matters: It sets the tone, depth, and domain knowledge of the response.

2) Task (What you want the AI to do)

This is the main instruction—the specific job you want the AI to perform.

Examples:

• “Explain how Angular change detection works.”
• “Write a LinkedIn post about AI trends.”
• “Create a step-by-step migration plan.”

Why it matters: Without a clear task, the response becomes vague or off-topic.

3) Context (Background or constraints)

This provides additional details that help the AI give a more accurate and useful answer.

Examples:

• “I have 13 years of experience in Angular.”
• “The audience is non-technical.”
• “Keep the response under 200 words.”

Why it matters: Context makes the response relevant, personalized, and precise.

Simple Formula

Effective Prompt = Role + Task + Context

Example:

“Act as a senior Angular architect (Role). Create a migration plan from Angular to React (Task). The project is a monolithic enterprise app with 10 modules (Context).”

Here are improved versions of each prompt using the Role + Task + Context structure so the AI can give more precise and useful answers.

1) Original

I need to loop through an array. Help?

Improved Prompt

Act as a JavaScript expert. Show me different ways to loop through an array in JavaScript, including for, forEach, map, and for…of. I’m a beginner and would like simple examples with explanations.

2) Original

I want my website to look good on phones too.

Improved Prompt

Act as a frontend UI/UX expert. Explain how to make a website responsive for mobile devices. My site is built with HTML and CSS, and I’m new to responsive design. Provide step-by-step guidance and code examples.

3) Original

I'm having issues bringing data into my React app.

Improved Prompt

Act as a senior React developer. Help me troubleshoot issues fetching and displaying API data in a React app. I’m using functional components with hooks, and the data is coming from a REST API. Provide possible causes, debugging steps, and sample code.