BMAD-METHOD/docs/training/ide-specific-guides/cline-guide.md

Using the v0 UX/UI Architect with Cline (Claude Dev)

This guide provides specific instructions for using the v0 UX/UI IDE Architect persona within Cline (formerly Claude Dev).

Setup

1. Install Cline: Download and install from Anthropic's website
2. Open Your Project: Launch Cline and open your frontend project
3. Configure Settings:
   • Ensure you're using Claude 3 Opus or the most capable model available
   • Configure any project-specific settings

Activating the v0 UX/UI Architect

1. Open a new chat in Cline
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.

3. The AI will acknowledge and adopt the persona

Effective Workflows in Cline

Component Creation Workflow

1. Analyze Project Structure:

   Please analyze my project structure to understand our component organization,
   styling approach, and existing patterns.
   

2. Create Component Files:

   I need to create a DataTable component that supports sorting, filtering,
   and pagination. Please create the necessary files following our project structure.
   

3. Implement Component Logic:

   Now let's implement the core logic for the DataTable component,
   focusing on the sorting and filtering functionality.
   

4. Add Styling:

   Let's style the DataTable component according to our design system.
   It should be responsive and support both light and dark themes.
   

5. Create Tests:

   Please create comprehensive tests for the DataTable component,
   covering all key functionality and edge cases.
   

Design System Implementation

1. Analyze Existing Design System:

   Please analyze our current design system implementation and suggest
   improvements for consistency and maintainability.
   

2. Implement Design Tokens:

   I need to implement our design tokens as CSS variables or a ThemeProvider,
   depending on our project setup.
   

3. Create Component Library:

   Let's create a core set of components that implement our design system:
   Button, Input, Card, and Modal.
   

Cline-Specific Features

File System Integration

Cline has excellent file system awareness. Use this to your advantage:

Please scan our src/components directory and identify any inconsistencies
in our component implementation patterns.

Code Analysis

Leverage Cline's code understanding capabilities:

Can you analyze this component and suggest improvements for performance,
accessibility, and maintainability?

Terminal Integration

Use Cline's terminal integration for package management:

I need to add a date picker to our project. Please recommend a library
that fits our needs and show me how to install and integrate it.

Tips for Best Results

1. Share Project Context: Give Cline information about your project's purpose and requirements
2. Be Explicit About Standards: Mention coding standards, accessibility requirements, etc.
3. Use Incremental Development: Build complex components in stages
4. Request Explanations: Ask Cline to explain its implementation choices
5. Leverage File References: Reference existing files to maintain consistency

Troubleshooting

Common Issues in Cline

1. Context Limitations: If Cline seems to miss context:

   • Remind it of key project details
   • Share relevant code snippets again

2. Complex Component Challenges:

   • Break down complex components into smaller parts
   • Focus on one aspect at a time (structure, logic, styling)

3. Integration Issues:

   • Be explicit about how components should integrate with existing code
   • Provide examples of similar integrations

Example Session

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

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 an accessible form system for our React application. We use Formik for form management and need to ensure all components are fully accessible.

AI: I'll help you create an accessible form system with Formik integration. Let's start by analyzing what components we'll need:

1. First, let's create a base FormField component that handles common accessibility features:
[Creates FormField.tsx with accessibility features]

2. Now, let's create specific field types:
[Creates TextField.tsx, SelectField.tsx, CheckboxField.tsx, etc.]

3. Let's create a Form component that integrates with Formik:
[Creates Form.tsx with Formik integration]

4. Finally, let's add comprehensive accessibility features:
[Updates components with ARIA attributes, keyboard navigation, etc.]

User: These look good, but I'm concerned about error handling and validation feedback.

AI: Great point! Let's enhance the error handling and validation feedback:
[Updates components with improved error handling and validation feedback]

User: Can you also show me how to test these components for accessibility?

AI: Here's how to test these components for accessibility:
[Creates test files with accessibility testing]

Conclusion

Cline is particularly well-suited for working with the v0 UX/UI IDE Architect persona due to its strong code understanding capabilities and file system awareness. By following this guide, you'll be able to efficiently create high-quality, accessible frontend components directly in your codebase.