Define scope, stack, and file roles before generation.
Context First means providing comprehensive background information about your project, technology stack, file structure, and specific constraints before asking for code generation or modifications.
Without proper context, AI models often generate generic solutions that don't fit your specific needs, leading to multiple rounds of clarification and rework. Providing context upfront saves time and produces more accurate, relevant code.
I'm building a React 18 TypeScript app with Next.js 13 (app router).
Project structure:
- src/components/ (reusable UI components)
- src/app/ (pages using app router)
- Using Tailwind CSS for styling
- Zustand for state management
I need a UserProfile component that:
- Displays user avatar, name, and email
- Has an edit mode with form validation
- Integrates with our existing useUserStore hook
- Follows our design system (components use cn() utility for class merging)
Can you create this component with proper TypeScript types?Create a user profile component that shows user info and allows editing.You'll be given a vague request. Your task is to rewrite it with comprehensive context including stack, structure, and constraints.
Goal:
Practice writing context-rich prompts that include all necessary project information.
Scoring Rubric:
Upload your Cursor logs to see how well you're applying Context First and get personalized exercises.