121 lines
3.4 KiB
Markdown
121 lines
3.4 KiB
Markdown
# IDE Environment Quick Start Guide
|
|
|
|
## 5-Minute Setup for v0 UX/UI Architect in IDEs
|
|
|
|
### Prerequisites
|
|
- Cursor AI, Cline, Claude Code, or Roocode installed
|
|
- BMAD Method files copied to your project root
|
|
- Basic frontend project setup (React, Vue, etc.)
|
|
|
|
### Step 1: Prepare Your Project
|
|
```bash
|
|
# Copy BMAD Method files to your project
|
|
cp -r /path/to/bmad-agent ./bmad-agent
|
|
|
|
# Ensure your project has the necessary dependencies
|
|
npm install # or yarn install
|
|
```
|
|
|
|
### Step 2: Activate Victor in Your IDE
|
|
|
|
#### For Cursor AI:
|
|
1. Open the persona file: `bmad-agent/personas/v0-ux-ui-architect.ide.md`
|
|
2. In Cursor's chat: "Activate Victor, the v0 UX/UI Architect"
|
|
3. Provide your component requirements
|
|
|
|
#### For Cline:
|
|
1. Reference the persona file in chat
|
|
2. Type: "Embody the v0 UX/UI Architect persona from bmad-agent/personas/v0-ux-ui-architect.ide.md"
|
|
3. Specify your implementation needs
|
|
|
|
### Step 3: Request Component Implementation
|
|
```
|
|
Victor, I need you to implement a responsive product card component using React and Tailwind CSS.
|
|
|
|
Requirements:
|
|
- Product image with hover effects
|
|
- Product title and description
|
|
- Price display with discount handling
|
|
- Add to cart button
|
|
- Responsive design (mobile-first)
|
|
- Accessibility features
|
|
- TypeScript interfaces
|
|
|
|
Please create all necessary files and update imports.
|
|
```
|
|
|
|
### Step 4: Review Generated Files
|
|
Victor will create:
|
|
- Component file (e.g., `ProductCard.tsx`)
|
|
- Styling (if using CSS modules)
|
|
- Type definitions
|
|
- Usage examples
|
|
- Test file (if testing framework detected)
|
|
|
|
### Step 5: Test and Iterate
|
|
```
|
|
The component looks great! Can you add a wishlist button and make the image lazy-loaded?
|
|
```
|
|
|
|
## IDE-Specific Workflows
|
|
|
|
### Cursor AI Workflow
|
|
```
|
|
Victor, analyze my existing component structure and create a new SearchBar component
|
|
that follows the same patterns. It should integrate with our existing design system.
|
|
```
|
|
|
|
### Cline Workflow
|
|
```
|
|
I need you to refactor this existing component to use our new design tokens.
|
|
Also add proper error handling and loading states.
|
|
```
|
|
|
|
### Claude Code Workflow
|
|
```
|
|
Create a comprehensive form component with validation, error handling,
|
|
and accessibility features. Follow our coding standards and include tests.
|
|
```
|
|
|
|
### Roocode Workflow
|
|
```
|
|
Let's rapidly prototype a dashboard layout with multiple widget types.
|
|
Create the basic structure and we'll iterate on the details.
|
|
```
|
|
|
|
## Best Practices for IDE Usage
|
|
|
|
### Project Context
|
|
- Ensure Victor can see your package.json
|
|
- Reference existing components for consistency
|
|
- Mention your coding standards and conventions
|
|
|
|
### Incremental Development
|
|
- Start with basic functionality
|
|
- Add features incrementally
|
|
- Test each iteration before proceeding
|
|
|
|
### Integration Focus
|
|
- Ask Victor to update imports/exports
|
|
- Request integration with existing routing
|
|
- Ensure compatibility with your build process
|
|
|
|
## Troubleshooting
|
|
|
|
### "Victor doesn't understand my project structure"
|
|
```
|
|
Victor, please analyze my project structure first. Look at the existing components
|
|
in src/components/ and follow the same patterns for file organization and naming.
|
|
```
|
|
|
|
### "Generated code doesn't match our standards"
|
|
```
|
|
Please review our ESLint configuration and coding standards in .eslintrc.js
|
|
and ensure the generated code follows these rules.
|
|
```
|
|
|
|
### "Components don't integrate properly"
|
|
```
|
|
Check the existing component imports in src/components/index.ts and update
|
|
the exports to include the new component.
|