BMAD-METHOD/docs/quick-start-guides/ide-environment-quickstart.md

IDE Environment Quick Start Guide

5-Minute Setup for v0 UX/UI Architect in IDEs

Prerequisites

• Cursor AI, Cline, Claude Code, or Roocode installed
• BMAD Method files copied to your project root
• Basic frontend project setup (React, Vue, etc.)

Step 1: Prepare Your Project

# Copy BMAD Method files to your project
cp -r /path/to/bmad-agent ./bmad-agent

# Ensure your project has the necessary dependencies
npm install # or yarn install

Step 2: Activate Victor in Your IDE

For Cursor AI:

1. Open the persona file: bmad-agent/personas/v0-ux-ui-architect.ide.md
2. In Cursor's chat: "Activate Victor, the v0 UX/UI Architect"
3. Provide your component requirements

For Cline:

1. Reference the persona file in chat
2. Type: "Embody the v0 UX/UI Architect persona from bmad-agent/personas/v0-ux-ui-architect.ide.md"
3. Specify your implementation needs

Step 3: Request Component Implementation

Victor, I need you to implement a responsive product card component using React and Tailwind CSS.

Requirements:
- Product image with hover effects
- Product title and description
- Price display with discount handling
- Add to cart button
- Responsive design (mobile-first)
- Accessibility features
- TypeScript interfaces

Please create all necessary files and update imports.

Step 4: Review Generated Files

Victor will create:

• Component file (e.g., ProductCard.tsx)
• Styling (if using CSS modules)
• Type definitions
• Usage examples
• Test file (if testing framework detected)

Step 5: Test and Iterate

The component looks great! Can you add a wishlist button and make the image lazy-loaded?

IDE-Specific Workflows

Cursor AI Workflow

Victor, analyze my existing component structure and create a new SearchBar component 
that follows the same patterns. It should integrate with our existing design system.

Cline Workflow

I need you to refactor this existing component to use our new design tokens. 
Also add proper error handling and loading states.

Claude Code Workflow

Create a comprehensive form component with validation, error handling, 
and accessibility features. Follow our coding standards and include tests.

Roocode Workflow

Let's rapidly prototype a dashboard layout with multiple widget types. 
Create the basic structure and we'll iterate on the details.

Best Practices for IDE Usage

Project Context

• Ensure Victor can see your package.json
• Reference existing components for consistency
• Mention your coding standards and conventions

Incremental Development

• Start with basic functionality
• Add features incrementally
• Test each iteration before proceeding

Integration Focus

• Ask Victor to update imports/exports
• Request integration with existing routing
• Ensure compatibility with your build process

Troubleshooting

"Victor doesn't understand my project structure"

Victor, please analyze my project structure first. Look at the existing components 
in src/components/ and follow the same patterns for file organization and naming.

"Generated code doesn't match our standards"

Please review our ESLint configuration and coding standards in .eslintrc.js 
and ensure the generated code follows these rules.

"Components don't integrate properly"

Check the existing component imports in src/components/index.ts and update 
the exports to include the new component.