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.