Skip to main content

Cursor AI Coding

The Easiest Way to Use Cursor to build apps.

Website

Context​

Overview​

Provide Cursor with context about your app, upfront leverage prompt files, carefully review its output, and focus on using it for its strengths like UI development and code editing. With practice, Cursor can make you a significantly faster developer.

  1. Plan out your app before jumping into Cursor AI. Draw sketches or wireframes of what you want to build to give the AI more context. Use tools like Figma, Paint, or even pencil and paper to visualize your app first.
  2. Use Cursor's directory feature to find pre-written prompts for the technologies you're using (e.g. Next.js, React, Python). Copy these prompts into a cursor.rules file in your project to set up Cursor with best practices for those technologies.
  3. When you get stuck, copy the code causing issues along with Cursor's attempted solutions and paste it into another AI model like Claude or GPT-4. Provide the error details and desired output to get better solutions.
  4. Add comments to your code explaining what it does. You can ask Cursor to generate these comments to make your code more understandable.
  5. Create prompt files (e.g. ui-guidelines.md) that contain instructions you commonly give Cursor. Reference these files when making requests, e.g. "Create a table following the guidelines in ui-guidelines.md".
  6. Carefully review every line of code Cursor generates before accepting the changes. Don't blindly accept its suggestions, as it can sometimes produce suboptimal or incorrect code.
  7. Prompt Cursor to ask you clarifying questions by ending your instructions with something like "Ask any questions you have to make the instructions clearer". Its code will be better if you answer those follow-up questions.
  8. Use Cursor for tasks it excels at - building UIs, refactoring code, editing code snippets, and auto-completing code. Avoid relying on it too much for very complex logic or integrating bleeding-edge packages.

Best Practices​

The key is to provide clear instructions with ample context to get the most relevant and accurate code suggestions.

By planning ahead, leveraging existing prompt libaries and rules, using shortcuts, providing context, and continuously training the AI - you can significantly boost your productivity and code quality when working with Cursor AI.

  • Visualize Intentions
  • Copy Effective Configs
  • Learn Keyboard Shortcuts
  • Provide Valuable Context
  • Positive Feedback Loop

Visualize Intentions​

Map out flow of value before coding.

  • Sketch your ideas: Use tools like Figma or even pen and paper to outline your project before starting to code. Having a visual reference can help clarify your intentions to Cursor AI.
  • Visualize with tools: Platforms like V0 by Vercel can help you quickly create wireframes. Providing Cursor AI with a clear plan and visual references gives it more context, resulting in more accurate code generation.

Copy Effective Configs​

Leverage Cursor Directory for Better Prompts

  • Copy expert prompts: Find prompts in cursor.directory tailored to the technologies you're using, such as Next.js, React, or Python.
  • Set up cursor rules: Create a cursor.rules file in your project root with appropriate prompts to guide Cursor AI to align with your project's specific needs and conventions.

Learn Keyboard Shortcuts​

Use Keyboard Shortcuts Effectively

  • (Ctrl | ⌘) + K instead of (Ctrl | ⌘) + L: ⌘+K edits the file directly, allowing you to stay focused on the code without the distraction of the chat window.
  • (Ctrl | ⌘) + Shift + I for Composer: Enable the Composer feature in settings, then use this shortcut to open it for making edits across multiple files simultaneously.

Provide Valuable Context​

  • Upload documentation: In Cursor settings, upload documentation URLs for the frameworks, languages, or packages you're using. This allows Cursor AI to refer to them for best practices.
  • Use @ to link files: When asking Cursor AI for help, use @ to link the relevant files and components to provide it with the right amount of context for accurate suggestions.

Positive Feedback Loop​

Drive continuous improvement by fine-tuning settings.

  • Update AI rules: Edit the "Rules for AI" in settings whenever Cursor AI makes a mistake or does something wrong. This feedback loop helps it learn your preferences and coding style.
  • Request explanations: When working with AI-generated code, ask Cursor AI to explain parts you don't understand. This helps you learn best practices and the reasoning behind the code.