ldy26098
/
BMAD-METHOD
mirror of https://github.com/bmad-code-org/BMAD-METHOD.git
1
0
Fork 0
Code Packages Projects Releases Wiki Activity
BMAD-METHOD/docs/ide-setup-guides/cline-setup.md

3.7 KiB
Raw Blame History

Setting Up v0-UX/UI Architect in Cline (Claude Dev)

This guide will help you set up and use the v0-UX/UI Architect persona in Cline 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 Cline

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

  3. Configure Cline

    • Ensure Cline has access to your project files
    • Set up any necessary API keys or authentication

2. Persona Activation

  1. Direct File Method

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

  2. IDE Orchestrator Method

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

3. Project Context Setup

For optimal results, provide the following context:

  1. Project Structure Overview

    • Use Cline's project exploration features to analyze your codebase
    • 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

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. Terminal Integration Cline excels at terminal integration. Try:

    Help me set up a new component library with Storybook integration.

Cline-Specific Tips

  1. Leverage Terminal Integration

    • Cline can help install dependencies and run commands
    • Example: "Install and configure Tailwind CSS for this project"

  2. Project-Wide Refactoring

    • Cline is excellent at understanding project context
    • Try: "Refactor all our button components to use the new design system"

  3. Documentation Generation

    • Ask for documentation alongside implementation
    • Example: "Create a dropdown component and generate Storybook documentation"

  4. Testing Integration

    • Cline can create tests alongside components
    • Try: "Create a modal component with Jest tests"

Troubleshooting

Common Issues

  1. Context Limitations

    • Problem: Cline loses track of project context
    • Solution: Remind it of the current file structure or reopen key files

  2. Dependency Management

    • Problem: Suggested packages aren't installed
    • Solution: Ask Cline to generate the install commands for you

  3. File Creation Permissions

    • Problem: Cline can't create new files
    • Solution: Check your IDE permissions and settings

Getting Help

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

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