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

# Using the v0 UX/UI Architect with Claude Code

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

## Setup

1. **Access Claude Code**: Visit [Claude Code](https://claude.ai/code) or access it through your Claude interface
2. **Upload Your Project**: Upload your project files or connect to your repository
3. **Configure Settings**:
   - Ensure you're using the most capable Claude model available
   - Set any project-specific preferences

## Activating the v0 UX/UI Architect

1. Start a new conversation in Claude Code
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 Claude Code

### Component Creation Workflow

1. **Project Analysis**:
   ```
   Please analyze my project to understand our component architecture,
   styling approach, and existing patterns.
   ```

2. **Component Planning**:
   ```
   I need to create a complex Dashboard component with multiple widgets,
   data visualization, and interactive elements. Let's plan the component
   structure before implementation.
   ```

3. **Implementation**:
   ```
   Based on our plan, let's implement the Dashboard component and its
   child components, focusing on maintainability and performance.
   ```

4. **Styling**:
   ```
   Now let's style the Dashboard component according to our design system,
   ensuring it's responsive and visually consistent with our application.
   ```

5. **Testing**:
   ```
   Please create comprehensive tests for the Dashboard component,
   including unit tests, integration tests, and visual regression tests.
   ```

### Design System Implementation

1. **Design Token Implementation**:
   ```
   I need to implement our design tokens in a way that supports
   theming and can be used across our application.
   ```

2. **Component Library Setup**:
   ```
   Let's set up a component library structure that will allow us
   to maintain and document our design system components.
   ```

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

## Claude Code-Specific Features

### Code Generation

Claude Code excels at generating high-quality, well-structured code:

```
Please generate a complete, production-ready Accordion component
that follows accessibility best practices and supports keyboard navigation.
```

### Documentation Generation

Leverage Claude Code's documentation capabilities:

```
Please create comprehensive documentation for our Button component,
including props, examples, accessibility notes, and best practices.
```

### Code Review

Use Claude Code for code review and improvement:

```
Please review this component and suggest improvements for:
1. Performance optimization
2. Accessibility
3. Code organization
4. Error handling
```

## Tips for Best Results

1. **Provide Design References**: Share design mockups or descriptions
2. **Be Specific About Requirements**: Detail functional and non-functional requirements
3. **Share Existing Patterns**: Reference existing components to maintain consistency
4. **Specify Technical Constraints**: Mention browser support, performance targets, etc.
5. **Request Explanations**: Ask Claude Code to explain its implementation choices

## Troubleshooting

### Common Issues in Claude Code

1. **Complex State Management**:
   - Break down state management into smaller, focused discussions
   - Use diagrams to clarify state flow

2. **Style Integration Challenges**:
   - Be explicit about your styling approach (CSS Modules, Styled Components, etc.)
   - Provide examples of existing styled components

3. **Performance Concerns**:
   - Specify performance targets
   - Ask for specific optimizations (memoization, virtualization, etc.)

## Example Session

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

```
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 complex multi-step form for our user onboarding process. It should save progress between steps and validate each step before proceeding.

AI: I'll help you create a robust multi-step form system. Let's approach this systematically:

1. First, let's design the overall architecture:
[Provides architecture diagram and explanation]

2. Now, let's create the core MultiStepForm component:
[Creates MultiStepForm.tsx with state management]

3. Let's implement the step navigation system:
[Creates StepNavigation.tsx]

4. Now, let's create the form state management:
[Creates useFormState.ts hook]

5. Let's implement validation for each step:
[Creates validation.ts]

6. Finally, let's put it all together with a complete example:
[Creates a complete implementation example]

User: This looks great, but how do we handle saving progress if the user leaves the page?

AI: Excellent question! Let's add persistence to our form:
[Updates implementation with localStorage or API-based persistence]

User: Can you also show how we would test this component?

AI: Here's a comprehensive testing strategy:
[Creates test files with various test cases and scenarios]
```

## Conclusion

Claude Code is well-suited for working with the v0 UX/UI IDE Architect persona due to its strong code generation and documentation capabilities. By following this guide, you'll be able to efficiently create high-quality frontend components with a focus on maintainability, accessibility, and performance.