I’ve put together some tips for using Cursor that I think are relevant for custom EC (Elements Components) development that I hope helps. It is formatted in Markdown for those wondering.
Editing & Navigation Shortcuts
Cmd+K: Quickly edit inline functions.
Cmd+Shift+L: Open Chat for almost everything else. It’s incredibly versatile for generating, refining, and asking questions about code.
Cmd+/: Cycle between models. Switching between Claude 3.5 Sonnet, o1-mini, o1-preview, and cursor-fast gives you flexibility.
o1-mini and o1-preview are perfect for generating complex code, whereas Claude is ideal for refining and iterating it.
Composer for Multi-File Edits
Cmd+Shift+I: Opens Composer in a large window. Despite its current bugs, Composer is still your best bet for editing multiple files simultaneously.
Examples include “Refactor this file into files with imports” or “Create new files.” Composer helps break complex tasks into simpler imports and refactors.
Still unsure about the difference between + adding files vs @ mentioning them in Composer. If anyone has insights, feel free to share!
Bring Context into Play
You can @tag various elements into your context:
Specific files and folders
Direct links from the web
Reference current or previous Git changes
Even entire documentation sites (which can be re-indexed!)
When tagging documents, my personal take: sometimes a direct link to the exact doc you’re working on is better than tagging an entire doc site—it saves tokens and keeps context focused.
Workarounds and Model Switching
o1-mini and o1-preview are particularly helpful if you want more complexity in your generated output, while switching back to Claude often works well for executing or iterating on what you’ve got.
Composer Bugs
It’s a known issue that Composer still has bugs, but stick with it. We had multiple bugs during our usage, but ultimately found it useful for its intended purpose: editing multiple files at once. Don’t give up; there’s a lot of potential here!
More Tips for Making the Most of Cursor-AI IDE for Elements Component Development
Following up on my previous tips for Cursor-AI, here are some additional best practices to enhance your development experience specifically when creating custom Components in Elements, without repeating the earlier points. Let’s dive in!
1. Leverage ChatGPT for Component Planning
Before diving into building a component, leverage ChatGPT to help draft key specifications like functional requirements, data structures, and design patterns. Storing these as .md files within Cursor ensures all team members are aligned and have consistent guidance throughout the component development.
2. Utilize Cursor Directory for Better Prompts
Cursor has a directory of tech-specific prompts that can be highly effective. Copy and tailor these for your Elements components by creating a .cursor_rules file—customizing these to suit your project can greatly enhance the accuracy of responses.
3. Tag Official Docs for Reliable Context
This is a duplication of the same suggestion above–but very worth it. Sync official documentation from relevant frameworks or the Elements documentation directly into Cursor. Having real-time access to up-to-date, official resources helps avoid outdated solutions and ensures accurate information during component development.
4. Save Useful Code Examples in Markdown
When Cursor provides a particularly useful snippet, save it in an .md file for future reference. This allows you to reuse well-written code and improves Cursor’s response efficiency as it “learns” from your examples.
5. Use Cursor for Learning and Code Explanation
Don’t just generate code—use Cursor to help you understand it. Ask Cursor to explain your component code as if you’re a beginner. It’s a great way to learn and understand the nuances of different coding patterns, helping you grow as a developer.
6. Start with Component Templates
Save time by starting with boilerplate code for common elements within your custom Components.
Key Takeaway
The more context you provide to Cursor, the fewer mistakes and better quality output you’ll get. Treat Cursor like a collaborator: give it detailed context, and you’ll be rewarded with efficient and accurate results.
Let’s keep this conversation going—how are you leveraging Cursor for your Elements component workflow? Share your experiences!
A little bird looking over my shoulder asked if these tips apply to general code development…yes. Actually conversations had nothing to do with Elements. We were discussing using Cursor-AI is a variety of other code development environments (and how bad Xcode is and far behind it is in using GenAI improve development). I modified my conversation take-aways specifically for EC development.