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/roocode-setup.md

3.8 KiB
Raw Blame History

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

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