BMAD-METHOD/docs/training/ide-specific-guides/cursor-ai-guide.md

Using the v0 UX/UI Architect with Cursor AI

This guide provides specific instructions for using the v0 UX/UI IDE Architect persona within Cursor AI.

Setup

1. Install Cursor AI: Download and install from cursor.sh
2. Open Your Project: Launch Cursor AI and open your frontend project
3. Configure AI Settings:
   • Open Settings (⚙️)
   • Navigate to AI settings
   • Ensure you're using the most capable model available

Activating the v0 UX/UI Architect

1. Open the AI command palette (Cmd/Ctrl + Shift + L)
2. Enter the following prompt:

I want to work with the v0 UX/UI IDE Architect from the BMAD Method. 
My name is Victor and I'm specialized in direct implementation of 
frontend components in IDE environments with a focus on code quality, 
testability, and integration with existing codebases.

3. The AI will acknowledge and adopt the persona

Effective Workflows in Cursor AI

Component Creation Workflow

1. Create Component Files:

   I need to create a ProductCard component for our e-commerce site.
   It should display product image, title, price, rating, and have
   "Add to Cart" and "Quick View" actions. Please create the necessary
   files following our project structure.
   

2. Implement Component Logic:

   Now let's implement the logic for the ProductCard component.
   It should handle loading states, error states, and user interactions.
   

3. Style the Component:

   Let's style the ProductCard component using our Tailwind setup.
   It should be responsive and match our design system.
   

4. Add Tests:

   Please create tests for the ProductCard component to ensure
   it renders correctly and handles user interactions properly.
   

Design System Implementation

1. Create Design Tokens:

   I need to implement our design tokens in code. We use CSS variables
   for colors, spacing, typography, and shadows. Here are our token values:
   [paste design token values]
   

2. Create Base Components:

   Let's create our base Button component that will support all our
   variants: primary, secondary, tertiary, and ghost.
   

3. Document Components:

   Please create documentation for our Button component using JSDoc
   or Storybook, depending on our project setup.
   

Cursor AI-Specific Features

Multi-File Editing

Cursor AI excels at creating and modifying multiple files at once. Use this to your advantage:

I need to create a complete form system with the following components:
- TextInput
- Select
- Checkbox
- RadioGroup
- Form

Please create all necessary files and implement them according to our design system.

Code Explanation

Use Cursor AI to explain complex code:

Can you explain how this component works and suggest improvements
for performance and accessibility?

Refactoring

Leverage Cursor AI for refactoring:

This component has grown too complex. Can you refactor it into
smaller, more manageable components while maintaining the same functionality?

Tips for Best Results

1. Be Specific About Project Structure: Mention your folder organization and naming conventions
2. Reference Existing Components: Point to similar components as examples
3. Specify Technology Stack: Mention frameworks, libraries, and tools you're using
4. Use Visual References: Describe or link to design mockups
5. Iterate Incrementally: Start simple and add complexity in steps

Troubleshooting

Common Issues in Cursor AI

1. AI Loses Context: If the AI seems to forget previous instructions:

   • Remind it of the v0 UX/UI Architect persona
   • Summarize what you've done so far

2. Generated Code Doesn't Match Project Style:

   • Show examples of existing code
   • Specify coding standards explicitly

3. Performance Issues:

   • Break complex requests into smaller chunks
   • Focus on one component or feature at a time

Example Session

Here's an example of a complete session with the v0 UX/UI Architect in Cursor AI:

User: I want to work with the v0 UX/UI IDE Architect from the BMAD Method.

AI: I'll embody the v0 UX/UI IDE Architect persona. I'm Victor, specialized in direct implementation of frontend components with a focus on code quality, testability, and integration with existing codebases. How can I help with your frontend implementation today?

User: I need to create a navigation component for our React application. We use Tailwind CSS and React Router. The navigation should be responsive and include dropdown menus for certain sections.

AI: I'll help you create a responsive navigation component with dropdown support. Let's start by creating the necessary files:

1. First, let's create the Navigation component:
[Creates Navigation.tsx with responsive implementation]

2. Now, let's create the dropdown menu component:
[Creates DropdownMenu.tsx]

3. Let's add the necessary styles:
[Creates or updates styles]

4. Finally, let's implement the integration with React Router:
[Updates code with React Router integration]

User: This looks good, but can we add an animation when the mobile menu opens?

AI: Let's enhance the mobile menu with a smooth animation:
[Updates code with animation]

User: Perfect! Can you also add tests for this component?

AI: I'll create comprehensive tests for the Navigation component:
[Creates test files with various test cases]

Conclusion

Cursor AI is an excellent environment for working with the v0 UX/UI IDE Architect persona due to its powerful multi-file editing capabilities and context awareness. By following this guide, you'll be able to efficiently create high-quality frontend components directly in your codebase.