143 lines
3.9 KiB
Markdown
143 lines
3.9 KiB
Markdown
# Setting Up v0-UX/UI Architect in Cursor AI
|
|
|
|
This guide will help you set up and use the v0-UX/UI Architect persona in Cursor AI for efficient frontend development.
|
|
|
|
## Setup Instructions
|
|
|
|
### 1. Initial Setup
|
|
|
|
1. **Clone the BMAD-Method Repository**
|
|
\`\`\`bash
|
|
git clone https://github.com/bmadcode/BMAD-METHOD.git
|
|
cd BMAD-METHOD
|
|
\`\`\`
|
|
|
|
2. **Open in Cursor AI**
|
|
- Launch Cursor AI
|
|
- Open the cloned BMAD-METHOD folder
|
|
- Navigate to `bmad-agent/personas/v0-ux-ui-architect.ide.md`
|
|
|
|
3. **Configure Cursor AI**
|
|
- Open Cursor AI settings
|
|
- Under AI settings, ensure "File System Access" is enabled
|
|
- Set context window to maximum available size
|
|
|
|
### 2. Persona Activation
|
|
|
|
1. **Direct File Method**
|
|
- Open `bmad-agent/personas/v0-ux-ui-architect.ide.md` in Cursor
|
|
- Use the "Ask AI about this file" feature
|
|
- Type: "Embody this persona for my project"
|
|
|
|
2. **IDE Orchestrator Method**
|
|
- Open `bmad-agent/ide-bmad-orchestrator.md`
|
|
- Use the "Ask AI about this file" feature
|
|
- Type: "Activate the v0-UX/UI Architect persona"
|
|
|
|
### 3. Project Context Setup
|
|
|
|
For optimal results, provide the following context:
|
|
|
|
1. **Project Structure Overview**
|
|
\`\`\`
|
|
/src
|
|
/components
|
|
/styles
|
|
/pages
|
|
package.json
|
|
\`\`\`
|
|
|
|
2. **Tech Stack Information**
|
|
- Frontend framework (React, Vue, etc.)
|
|
- Styling approach (Tailwind, CSS-in-JS, etc.)
|
|
- State management solution
|
|
- Testing framework
|
|
|
|
## 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. **Component Refactoring**
|
|
\`\`\`
|
|
Refactor this existing component to use Tailwind CSS and improve performance:
|
|
[paste component code]
|
|
\`\`\`
|
|
|
|
### Cursor-Specific Tips
|
|
|
|
1. **Use Split View**
|
|
- Keep the persona file open in one panel
|
|
- Work on your components in another panel
|
|
|
|
2. **Leverage File Creation**
|
|
- Ask the persona to create multiple files at once
|
|
- Example: "Create a Button component with its test file and story"
|
|
|
|
3. **Context Refreshing**
|
|
- If the persona seems to lose context, type "Refresh project context"
|
|
- This will prompt it to re-analyze your project structure
|
|
|
|
4. **Command Palette Integration**
|
|
- Use Cursor's command palette to quickly invoke the persona
|
|
- Create custom commands for common requests
|
|
|
|
## Troubleshooting
|
|
|
|
### Common Issues
|
|
|
|
1. **Limited Context Understanding**
|
|
- **Problem**: Persona doesn't understand your project structure
|
|
- **Solution**: Provide a brief overview of key directories and files
|
|
|
|
2. **Incomplete Implementation**
|
|
- **Problem**: Generated components are missing features
|
|
- **Solution**: Be more specific in your requirements and provide examples
|
|
|
|
3. **Style Inconsistencies**
|
|
- **Problem**: Generated components don't match your design system
|
|
- **Solution**: Point to existing components as reference or provide design tokens
|
|
|
|
### Getting Help
|
|
|
|
If you encounter issues with the v0-UX/UI Architect persona in Cursor AI:
|
|
|
|
1. Check the [BMAD-Method documentation](https://github.com/bmadcode/BMAD-METHOD/docs)
|
|
2. Join the [BMAD-Method community](https://github.com/bmadcode/BMAD-METHOD/discussions)
|
|
3. Submit an issue on [GitHub](https://github.com/bmadcode/BMAD-METHOD/issues)
|