BMAD-METHOD/docs/ide-setup-guides/claude-code-setup.md

Setting Up v0-UX/UI Architect in Claude Code

This guide will help you set up and use the v0-UX/UI Architect persona in Claude Code for efficient frontend development.

Setup Instructions

1. Initial Setup

1. Clone the BMAD-Method Repository

   git clone https://github.com/bmadcode/BMAD-METHOD.git
   cd BMAD-METHOD
   

2. Open in Claude Code

   • Launch Claude Code
   • Open the cloned BMAD-METHOD folder
   • Navigate to bmad-agent/personas/v0-ux-ui-architect.ide.md

3. Configure Claude Code

   • Ensure Claude Code has access to your project files
   • Configure any necessary extensions or settings

2. Persona Activation

1. Direct File Method

   • Open bmad-agent/personas/v0-ux-ui-architect.ide.md in Claude Code
   • Ask Claude: "Embody this persona for my project"

2. IDE Orchestrator Method

   • Open bmad-agent/ide-bmad-orchestrator.md
   • Ask Claude: "Activate the v0-UX/UI Architect persona"

3. Project Context Setup

For optimal results, provide the following context:

1. Project Structure Overview

   • Use Claude Code's project exploration features
   • Or provide a brief description of your project structure

2. Tech Stack Information

   • Share your package.json or describe your tech stack
   • Highlight any specific libraries or frameworks you're using

Advanced Configuration

Claude Code Settings

Configure these settings for optimal BMAD integration:

{
  "claude.contextWindow": "maximum",
  "claude.codeQuality": "high",
  "claude.autoSuggest": true,
  "bmad.personaPath": "./bmad-agent/personas/"
}

Project Workspace Setup

Create a .claude/workspace.json file:

{
  "personas": {
    "default": "v0-ux-ui-architect",
    "fallback": "dev",
    "autoSwitch": true
  },
  "codeGeneration": {
    "framework": "react",
    "styling": "tailwind",
    "testing": "jest"
  }
}

Usage Guide

Basic Component Creation

1. Simple Component Request

   Create a responsive card component with:
   - Image
   - Title
   - Description
   - Action button
   

2. Component with Variants

   Create a button component with:
   - Primary, secondary, and tertiary variants
   - Different sizes (sm, md, lg)
   - Loading state
   - Disabled state
   

Advanced Usage

1. Design System Integration

   Create a modal component that follows our existing design system.
   It should have a header, body, footer, and close button.
   

2. Multi-Component Creation

   Create a form with:
   - Text input
   - Dropdown select
   - Checkbox group
   - Submit button
   All components should be reusable and follow accessibility best practices.
   

3. Code Quality Focus Claude Code excels at code quality. Try:

   Create a data table component with sorting, filtering, and pagination.
   Ensure it follows best practices for performance and accessibility.
   

Claude Code-Specific Tips

1. Leverage Code Quality Features

   • Claude Code excels at maintaining high code quality standards
   • Ask for specific optimizations: "Optimize this component for performance"

2. Accessibility Focus

   • Claude Code is excellent at implementing accessible components
   • Try: "Create a dropdown menu with full keyboard navigation and screen reader support"

3. Documentation Excellence

   • Ask for detailed documentation alongside implementation
   • Example: "Create a form component with comprehensive JSDoc comments"

4. Best Practices Integration

   • Claude Code can implement current best practices
   • Try: "Create a data fetching hook using the latest React best practices"

Performance Optimization

Code Quality Enhancement

• Enable real-time code analysis
• Use Claude Code's built-in linting integration
• Configure automated code formatting

Best Practices for BMAD Integration

• Always specify the target persona at conversation start
• Use Claude Code's project understanding features
• Leverage code context for better persona responses

Troubleshooting

Common Issues

1. Context Understanding

   • Problem: Claude Code misunderstands project structure
   • Solution: Provide more explicit file paths and relationships

2. Implementation Complexity

   • Problem: Generated components are too complex
   • Solution: Ask for simpler implementations or step-by-step explanations

3. Framework Specifics

   • Problem: Implementation doesn't match framework patterns
   • Solution: Specify framework version and preferred patterns

Getting Help

If you encounter issues with the v0-UX/UI Architect persona in Claude Code:

1. Check the BMAD-Method documentation
2. Join the BMAD-Method community
3. Submit an issue on GitHub