Prerequisites
-
Install Cursor (if you don't already have it)
-
Install Node.js 20+ (if you don't already have it. Preferrably 22)
node --version # to check the version -
Create an account of https://npmjs.org/ (if you don't already have one)
-
Install pnpm (if you don't already have it)
npm install -g pnpm
-
Clone the repository
git clone git@github.com:saurabhdaware/react-india-workshop-2025.git
-
Open the
appdirectory anddesign-systemdirectory in two separate windows of Cursor.cd react-india-workshop/ cursor app/ cursor design-system/
-
Be specific and elaborate
❌ "Build me a component" ✅ "Build a component using React and Styled Components. Use react router for navigation and formik for form validation"
-
Define role
"You are a software engineer who works in XYZ org. You work in frontend react applications for building good looking and accessible products"
-
Give few shots example
What is the weather in Goa today? Few shots examples on how to respond: Q: What is the weather today in Bangalore? A: It's 28 degree celcius in Bangalore with high chances of rain Q: What is the weather today in Mumbai? A: It's 32 degree celcius in Mumbai with no chances of rain
-
Avoid negations (Don't do X, etc)
❌ Don't use formik library ✅ Use react hook form library
-
Advanced: Reason and Act (ReAct)
First, think step-by-step and decide the best approach to refactor the code. Then, after the reasoning, write the actual refactored code in a code block.
-
Advanced: Structured Prompting (XML / Markdown)
❌ What is the weather in Goa?
✅ What is the weather in Goa? Respond in given format without any other text: <output_format> { "temperature": {number}, // in celcius "chances_of_rain": {"high" | "low" | "medium" | "none"} } </output_format>
- Live Gist (This will be used for copy-pasting snippets for audience)
- MCP
- AI Agents