BMAD-METHOD/docs/ide-setup-guides/cursor-ai-setup.md

Setting Up v0-UX/UI Architect in Cursor AI

This guide will help you set up and use the v0-UX/UI Architect persona in Cursor AI for efficient frontend development.

Setup Instructions

1. Initial Setup

1. Clone the BMAD-Method Repository

   git clone https://github.com/bmadcode/BMAD-METHOD.git
   cd BMAD-METHOD
   

2. Open in Cursor AI

   • Launch Cursor AI
   • Open the cloned BMAD-METHOD folder
   • Navigate to bmad-agent/personas/v0-ux-ui-architect.ide.md

3. Configure Cursor AI

   • Open Cursor AI settings
   • Under AI settings, ensure "File System Access" is enabled
   • Set context window to maximum available size

2. Persona Activation

1. Direct File Method

   • Open bmad-agent/personas/v0-ux-ui-architect.ide.md in Cursor
   • Use the "Ask AI about this file" feature
   • Type: "Embody this persona for my project"

2. IDE Orchestrator Method

   • Open bmad-agent/ide-bmad-orchestrator.md
   • Use the "Ask AI about this file" feature
   • Type: "Activate the v0-UX/UI Architect persona"

3. Project Context Setup

For optimal results, provide the following context:

1. Project Structure Overview

   /src
     /components
     /styles
     /pages
   package.json
   

2. Tech Stack Information

   • Frontend framework (React, Vue, etc.)
   • Styling approach (Tailwind, CSS-in-JS, etc.)
   • State management solution
   • Testing framework

Usage Guide

Basic Component Creation

1. Simple Component Request

   Create a responsive card component with:
   - Image
   - Title
   - Description
   - Action button
   

2. Component with Variants

   Create a button component with:
   - Primary, secondary, and tertiary variants
   - Different sizes (sm, md, lg)
   - Loading state
   - Disabled state
   

Advanced Usage

1. Design System Integration

   Create a modal component that follows our existing design system.
   It should have a header, body, footer, and close button.
   

2. Multi-Component Creation

   Create a form with:
   - Text input
   - Dropdown select
   - Checkbox group
   - Submit button
   All components should be reusable and follow accessibility best practices.
   

3. Component Refactoring

   Refactor this existing component to use Tailwind CSS and improve performance:
   [paste component code]
   

Cursor-Specific Tips

1. Use Split View

   • Keep the persona file open in one panel
   • Work on your components in another panel

2. Leverage File Creation

   • Ask the persona to create multiple files at once
   • Example: "Create a Button component with its test file and story"

3. Context Refreshing

   • If the persona seems to lose context, type "Refresh project context"
   • This will prompt it to re-analyze your project structure

4. Command Palette Integration

   • Use Cursor's command palette to quickly invoke the persona
   • Create custom commands for common requests

Troubleshooting

Common Issues

1. Limited Context Understanding

   • Problem: Persona doesn't understand your project structure
   • Solution: Provide a brief overview of key directories and files

2. Incomplete Implementation

   • Problem: Generated components are missing features
   • Solution: Be more specific in your requirements and provide examples

3. Style Inconsistencies

   • Problem: Generated components don't match your design system
   • Solution: Point to existing components as reference or provide design tokens

Getting Help

If you encounter issues with the v0-UX/UI Architect persona in Cursor AI:

1. Check the BMAD-Method documentation
2. Join the BMAD-Method community
3. Submit an issue on GitHub