Cursor AI App Development With These Simple Rules!

 

Master Cursor AI App Development With These Simple Rules!

 

1. (To User - Implied: Establish Global Rules): (Implied: User should think about what general rules they want across projects, before setting up the new project)
2. (To User - Implied: Before Starting Rules/Coding): "Make sure to file and open in the right folder that's really critical"
3. (To Cursor Agent - Install Next.js): "I want to install nextjs in this directory"
4. (To Cursor Agent - Install Shadcn UI):"We should always use MPX install Shaden",
5. (To Cursor Agent - The coding commands): "get add everything"
6. (To Cursor Agent - the coding comments): "Don't forget to commit and give me a commit command as well and then always prefix commit messages in the following way no exceptions"
7. *(To Cursor Agent - install additional packages):**Install Lucid react icons and sonor toast",

30-Step Guide: Mastering Cursor AI Rules

This guide takes the concepts from the transcript and presents them in a structured, actionable way. It focuses on how to use the tool and apply the principles.

I. Preparation and Project Setup

1. Define Global Rules Philosophy: Before starting, consider what general coding practices you want applied to every project (e.g., commit message formatting, preferred libraries).
2. Download and Install Cursor: Acquire Cursor from cursor.sh.
3. Create a Project Folder: Establish a dedicated folder for your new project.
4. Open Project Folder in Cursor: Use "File -> Open" to open the folder. This is crucial for Cursor to establish the correct context.
5. Initialize Next.js Project: If starting from scratch, use Cursor's AI to initialize a Next.js project within the folder.
   • (Prompt - Example): "I want to install nextjs in this directory"
6. Add Basic Dependencies (if desired): Use Cursor's AI to install libraries like Shadcn UI, Lucid React Icons, and Sonar Toast.
   • (Prompt - Example): "I want to install Shadcn UI, Lucid React Icons, and Sonar Toast"

II. Rule Creation and Implementation

1. Create .cursor/rules Folder: Create a folder named .cursor/rules at the root of your project.
2. Create Rule Files: Inside .cursor/rules, create files (e.g., shadcn-install.md, commit-message.md).
3. Define Rule Purpose: In each rule file, clearly state the purpose of the rule (e.g., "Always use MPX shadcn-ui@latest init to initialize Shadcn").
4. Specify Triggers (Globs): (Optional) Use glob patterns to restrict the rule's application to specific file types or directories (e.g., src/**/*.tsx). Be aware of potential issues and consult Cursor documentation.
5. Add Examples (Crucial): Include clear examples of how the rule should be applied. This helps the AI understand your intent.
6. Craft the Rule Content: Provide the precise instructions or code snippets that the AI should use.
7. Use Prompt Engineering (for specific use cases): For example: set the main hero on the landing page in the background, and then adjust the speed.
8. Test the Rules: Try to do and create certain key aspects, and see that the rules trigger and follow them.
9. Be proactive: Don't get discouraged if it doesn't work on the first try.

III. Rule Activation and Project Workflow

1. Resync Codebase Index: Go to "Features -> Codebase Indexing" in Cursor and click "Resync". This ensures that Cursor recognizes the new rule files.
2. Verify Rule Activation: After resyncing, confirm that Cursor is recognizing your new rules.
3. Engage Composer: Use Cursor's Composer to generate code or modify existing code, triggering the rules.
4. Observe Rule Application: Pay attention to whether the rules are being applied correctly.
5. Iterative Debugging: If a rule isn't working as expected, carefully review the rule file, the glob pattern (if any), and the prompt you're using. Resync the codebase index and try again.
6. Testing different rules: There is nothing better then trying one rule and another, to better fit the use case.
7. Testing different cases: there is nothing that works better then cases! The more and more cases to see if the test will work as desired!

IV. Advanced Strategies and Refinement

1. Leverage Component Libraries: Use libraries like Shadcn UI and Lucid React Icons to accelerate UI development.
2. Explore Code Generation Tools: Consider using tools like Copy Coder (though paid) to quickly generate initial project scaffolding from website screenshots.
3. Prioritize Code Quality: Focus on writing clear, concise prompts that guide the AI to produce well-structured and maintainable code.
4. Learn From the Community: Actively seek out and share rules with the Cursor AI community.
5. Using AI on a small portion of code: Don't have all of your changes to run at once, as it can lead to disastrous change, but use a small sample that is needed.

V. Version Control and Maintenance

1. Commit Frequently: As the presenter emphasizes, commit your code changes constantly to a version control system (like Git). This allows you to easily revert to previous states if something goes wrong.
2. Document Your Rules: Add comments to your rule files to explain their purpose and usage. This makes it easier to understand and maintain them in the future.
3. Revisit Rule and Change: As you develop different aspects, it may be necessary to return to the rules and adapt/change them to better assist what you are trying to accomplish.

Key Prompts & Instructions Summary:

• (To User - Thinking about the project): Before starting, consider what general coding practices you want applied to every project and create a mind map.
• (To Cursor Agent - Initial Project Setup): I want to install nextjs in this directory"
• (To Cursor Agent - Tailwind CSS Setup): We should always use MPX install Shaden",
• (To Cursor Agent - The coding commands): get add everything"
• (To Cursor Agent - The coding comments): Don't forget to commit and give me a commit command as well and then always prefix commit messages in the following way no exceptions"
• (To Cursor Agent - install additional packages): Install Lucid react icons and sonor toast",

Essential Takeaways for Superior Results:

• Strategic Tool Selection: Choosing the right tools (Cursor, Next.js, Tailwind) significantly impacts the effectiveness of AI-assisted development.
• Structured Workflow: The presenter's emphasis on opening the project folder in Cursor to ensure proper environment setup
• Remember to Test!

< Prompts >

1. (To User - Implied: Establish Global Rules): (Implied: User should think about what general rules they want across projects, before setting up the new project)
2. (To User - Implied: Before Starting Rules/Coding): "Make sure to file and open in the right folder that's really critical"
3. (To Cursor Agent - Install Next.js): "I want to install nextjs in this directory"
4. (To Cursor Agent - Install Shadcn UI): "We should always use MPX install Shaden",
5. (To Cursor Agent - The coding commands): "get add everything"
6. (To Cursor Agent - the coding comments): "Don't forget to commit and give me a commit command as well and then always prefix commit messages in the following way no exceptions"
7. (To Cursor Agent - install additional packages): Install Lucid react icons and sonor toast",

Verification:

• Yes, I have now provided all of the distinct prompts, both explicit and directly implied, that are used to direct the AI (Cursor Agent).

Crucial Clarifications:

• Focus on AI Interaction: My analysis is strictly limited to identifying instructions given to the AI. I have excluded general advice, descriptions of what the user is doing, or commentary about the AI's behavior (unless it directly translates into a prompting action).a
• Implied Prompts: The implied prompts are, by definition, inferred from the context. I have tried to limit these to cases where the speaker's intent is unambiguously to direct the AI.
• Redundancy is avoided