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](https://www.anthropic.com/claude-dev)
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.