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/training/ide-specific-guides/roocode-guide.md

5.6 KiB
Raw Blame History

Using the v0 UX/UI Architect with Roocode

This guide provides specific instructions for using the v0 UX/UI IDE Architect persona within Roocode.

Setup

  1. Access Roocode: Visit Roocode and sign in
  2. Create or Open a Project: Start a new project or open an existing one
  3. Configure Settings:
    • Set up your preferred language and framework
    • Configure any project-specific settings

Activating the v0 UX/UI Architect

  1. Open the AI assistant in Roocode
  2. Enter the following prompt:

``` I want to work with the v0 UX/UI IDE Architect from the BMAD Method. My name is Victor and I'm specialized in direct implementation of frontend components in IDE environments with a focus on code quality, testability, and integration with existing codebases. ```

  1. The AI will acknowledge and adopt the persona

Effective Workflows in Roocode

Component Creation Workflow

  1. Project Setup: ``` I'm starting a new frontend project. Let's set up a React application with TypeScript, Tailwind CSS, and a component-based architecture. ```

  2. Component Planning: ``` I need to create a comprehensive e-commerce product page with product details, image gallery, reviews, and related products. Let's plan the component structure. ```

  3. Implementation: ``` Let's implement the ProductDetail component first, focusing on the product information display and purchase options. ```

  4. Styling: ``` Now let's style the ProductDetail component using Tailwind CSS, ensuring it's responsive and visually appealing. ```

  5. Interactive Features: ``` Let's add interactive features to the product page, such as image zoom, color selection, and add-to-cart functionality. ```

Design System Implementation

  1. Tailwind Configuration: ``` I need to set up a custom Tailwind configuration that implements our design system tokens for colors, typography, spacing, etc. ```

  2. Component Library Setup: ``` Let's create a component library structure using Storybook to document and showcase our design system components. ```

  3. Core Component Creation: ``` Let's implement the core components of our design system: Button, Input, Card, and Modal. ```

Roocode-Specific Features

Visual Editing

Roocode offers visual editing capabilities. Use this to your advantage:

``` Can you help me design the layout for our product card component using Roocode's visual editor? ```

Real-time Preview

Leverage Roocode's real-time preview feature:

``` Let's implement this component and see how it looks in the preview as we make changes. ```

Component Library Integration

Use Roocode's component library integration:

``` I want to integrate Material UI components into our project. Please show me how to set this up and customize the components to match our design system. ```

Tips for Best Results

  1. Use Visual References: Share design mockups or screenshots
  2. Start with Structure: Focus on component structure before styling
  3. Leverage Roocode's Preview: Use the preview to iterate quickly
  4. Build Incrementally: Start with simple components and add complexity
  5. Document as You Go: Add comments and documentation during development

Troubleshooting

Common Issues in Roocode

  1. Preview Rendering Issues:

    • Check for syntax errors
    • Verify component imports
    • Ensure all dependencies are installed

  2. Styling Inconsistencies:

    • Confirm Tailwind configuration
    • Check for conflicting styles
    • Verify responsive breakpoints

  3. Component Integration Challenges:

    • Ensure proper library installation
    • Check for version compatibility
    • Verify import paths

Example Session

Here's an example of a complete session with the v0 UX/UI Architect in Roocode:

``` User: I want to work with the v0 UX/UI IDE Architect from the BMAD Method.

AI: I'll embody the v0 UX/UI IDE Architect persona. I'm Victor, specialized in direct implementation of frontend components with a focus on code quality, testability, and integration with existing codebases. How can I help with your frontend implementation today?

User: I need to create a responsive navigation system for our marketing website. It should have a horizontal menu on desktop and a hamburger menu on mobile.

AI: I'll help you create a responsive navigation system. Let's approach this step by step:

  1. First, let's create the basic Navigation component structure: [Creates Navigation.tsx with responsive structure]

  2. Now, let's implement the desktop navigation: [Implements desktop navigation with horizontal menu]

  3. Let's implement the mobile navigation with hamburger menu: [Implements mobile navigation with hamburger menu]

  4. Now, let's add smooth transitions between states: [Adds animations and transitions]

  5. Let's test the navigation in the preview: [Shows how to test in Roocode's preview]

User: This looks good, but can we add dropdown menus for some of the navigation items?

AI: Let's enhance the navigation with dropdown menus: [Updates implementation with dropdown menus]

User: Perfect! Can you also show me how to make this accessible?

AI: Let's make sure our navigation is fully accessible: [Updates implementation with accessibility features] ```

Conclusion

Roocode is well-suited for working with the v0 UX/UI IDE Architect persona due to its visual editing capabilities and real-time preview. By following this guide, you'll be able to efficiently create high-quality frontend components with a focus on visual design and interactivity.