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.