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](https://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.