BMAD-METHOD/docs/ide-setup-guides/roocode-setup.md

Setting Up v0-UX/UI Architect in Roocode

This guide will help you set up and use the v0-UX/UI Architect persona in Roocode 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 Roocode

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

3. Configure Roocode

   • Ensure Roocode has access to your project files
   • Set up any necessary extensions or settings

2. Persona Activation

1. Direct File Method

   • Open bmad-agent/personas/v0-ux-ui-architect.ide.md in Roocode
   • Ask Roocode: "Embody this persona for my project"

2. IDE Orchestrator Method

   • Open bmad-agent/ide-bmad-orchestrator.md
   • Ask Roocode: "Activate the v0-UX/UI Architect persona"

3. Project Context Setup

For optimal results, provide the following context:

1. Project Structure Overview

   • Use Roocode's project exploration features
   • Or provide a brief description of your project structure

2. Tech Stack Information

   • Share your package.json or describe your tech stack
   • Highlight any specific libraries or frameworks you're using

Advanced Configuration

Roocode Visual Settings

Configure these settings for optimal visual development:

{
  "roocode.visualFeedback": "enhanced",
  "roocode.componentPreview": "realtime",
  "roocode.designSystem": "auto-detect",
  "bmad.visualPersona": "v0-ux-ui-architect"
}

Design System Integration

Create a .roocode/design-config.json file:

{
  "designTokens": "./src/tokens/design-tokens.json",
  "componentLibrary": "./src/components",
  "personaPreferences": {
    "v0-ux-ui-architect": {
      "framework": "react",
      "styling": "tailwind",
      "accessibility": "wcag-aa"
    }
  }
}

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. Rapid Prototyping Roocode excels at rapid prototyping. Try:

   Create a dashboard layout with navigation, stats cards, and a data table.
   

Roocode-Specific Tips

1. Leverage Visual Feedback

   • Roocode's visual feedback loop is excellent for iterative development
   • Try: "Create a component and show me how it would look with different data"

2. Component Library Integration

   • Roocode works well with component libraries
   • Example: "Create a form using our existing component library"

3. Rapid Iteration

   • Use Roocode's quick feedback cycle for rapid iteration
   • Try: "Let's iterate on this component to improve the mobile experience"

4. Visual Design Focus

   • Roocode can help with visual design aspects
   • Example: "Improve the visual hierarchy of this component"

Performance Optimization

Visual Rendering Performance

• Enable hardware acceleration for component previews
• Use Roocode's caching for faster iterations
• Configure optimal viewport settings for responsive design

Design Workflow Enhancement

• Set up automated design token synchronization
• Use Roocode's visual diff features for component changes
• Enable real-time collaboration features

Troubleshooting

Common Issues

1. Visual Rendering

   • Problem: Components don't render as expected
   • Solution: Provide more specific visual requirements or references

2. Component Library Compatibility

   • Problem: Generated components don't match library patterns
   • Solution: Provide examples from your component library

3. Iteration Confusion

   • Problem: Iterations lose track of previous requirements
   • Solution: Summarize all requirements when requesting iterations

Getting Help

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

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