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.