ldy26098
/
BMAD-METHOD
mirror of https://github.com/bmad-code-org/BMAD-METHOD.git
1
0
Fork 0
Code Packages Projects Releases Wiki Activity
BMAD-METHOD/docs/ide-setup-guides/cursor-ai-setup.md

3.9 KiB
Raw Blame History

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 ```bash 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