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

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"

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