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 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.