Cursor Tips

Hey people!

I've been using Cursor AI IDE for about 2 months, every day, for both work and hobby coding and I feel I can share some great tips about it

First of all, if you're not familiar with Cursor or AI in Web Development in general, I highly suggest watching the videos below:

AI tools for software engineers, but without the hype – with Simon Willison (Co-Creator of Django) (must watch/listen)
https://www.youtube.com/watch?v=uRuLgar5XZw

General Cursor Usage: Cursor AI Tutorial for Beginners (How I Code 159% Faster) (2 months old. It is not that old yet, but it might be
worth looking for a more recent one)
https://youtu.be/yk9lXobJ95E

Using it with PRD and documentation: Best Cursor Workflow that no one talks about... (no need to watch everything; the first 18 min
are enough to get the idea)
https://www.youtube.com/watch?v=2PjmPU07KNs

Effective Code Review: Getting Cursor AI to Review Its Own Code
https://www.youtube.com/watch?v=vOlAniUTlCY

Cursor + Playwright: How to Build Robust Applications with Cursor AI + Playwright
https://www.youtube.com/watch?v=kH4hM0H_WPg

Podcast with the Cursor Team: Cursor Team: Future of Programming with AI | Lex Fridman Podcast #447
https://www.youtube.com/watch?v=oFfVt3S51T4

.cursorrules

Use a .cursorrules file in the root directory of your project to automatically use its content as context for all Cursor prompts.

It is shared for everyone and subject to git versioning.

Great to guide the AI to code like you’d do

Great to remind the AI about outdated things (like 'use client' on top of client-side files in Nextjs)

Use https://cursor.directory/ to get some sample usage.

The Composer

The Composer feature helps you create and edit multiple files simultaneously, making saving, testing and validating changes easy.

Easy Testing: Save all changes without individually applying changes to them

Creating Tests Together: Develop code and corresponding tests or Storybook components side by side.

Possible use case: It could be useful to add an extra simple/easy API payload field by adding all related files in the context.

Passing React Props: Pass props down through related components easily.

There are three ways to view the composer panel: Expanded, Floating, and Side Bar. I’m sticking with the third one currently.

Tip: Open all related files in your editor. In the Chat or Composer input, press / and select "Reference Open Editors" to include them in the context.

Golden tip: open all related files and add them at once to the context

Leveraging Markdown Files for Context

Include markdown files as instructions to provide the AI with project context.

Enhanced Understanding: Helps the AI grasp the specifics of your project.

Detailed Guidance: Offers more information than usual for better assistance.

Tip: Mention these instruction files in your prompts to incorporate their content.

Watch the start of this video to get a better understanding: https://youtu.be/2PjmPU07KNs

Keeping a Clean Working Directory

Always keep your working directory free of uncommitted changes.

Easy Reversion: Revert unwanted AI changes easily.

Manageable Commits: Make small, focused commits.

Linking to Documentation

Add links to library documentation in your prompts to guide the AI.

Up-to-Date Implementations: Ensures the AI uses the latest methods.

Avoid Deprecated Code: Prevents outdated implementations.

Tip: Include documentation links in your prompts.

Example: "Refer to Library X Documentation to implement the new feature."

Press @ do add a new documentation. We can even share them with the team

Using Voice-to-Text Tools and Chatbots

Utilize tools like Wispr Flow and ChatGPT to streamline your workflow.

Wispr Flow: Transcribes voice to text for faster prompt creation.

ChatGPT: Generates documentation without extensive typing.

Complex Prompts: Provides detailed context for better AI responses.

Tip: Combine voice transcription with chatbots to create and refine prompts efficiently.

Models

Use claude-3.5-sonnet for everything. Sometimes, o1-mini is more helpful when the task involves more thinking. The o1-preview model is pretty expensive in Cursor ($0.40/request), and using it on the ChatGPT Plus website is worthwhile.

(TODO: This is a published draft version of this blog post, I still want to format it better and add images)