Cursor AI Custom Mode Setup Guide

Quick Setup

1. Enable Custom Modes

1. Open Cursor AI
2. Go to Settings → Features → Chat → Custom modes
3. Toggle on Custom modes

2. Create Your Custom Mode

1. Click the mode menu in chat
2. Select Add custom mode
3. Configure:
   • Name: Frontend Expert
   • Icon: Choose any icon
   • Shortcut: @fe (optional)

3. Configure Tools

Select these tools for optimal frontend development:

• ✅ Codebase (for project analysis)
• ✅ Edit & Reapply (for code modifications)
• ✅ Read file (for context analysis)
• ✅ Search files (for pattern detection)
• ✅ Terminal (for build tools)
• ✅ Auto-apply edits (for faster workflow)

4. Add Custom Instructions

Copy and paste the system prompt from the previous artifact into the Custom Instructions field.

How to Use

Basic Usage

1. Start a new chat
2. Select your "Frontend Expert" mode from the mode dropdown
3. The AI will automatically detect your project stack and provide expert assistance

Example Requests

"Create a responsive dashboard component"
"Optimize this React component for performance"
"Add accessibility features to this form"
"Review this code for security issues"

Pro Tips

• Provide context: Mention your framework when needed
• Be specific: Include requirements and constraints
• Use existing code: Reference current implementations
• Ask for explanations: Request reasoning behind suggestions

That's It!

Your custom mode will now:

• Auto-detect your project framework and tools
• Preserve existing code and comments
• Generate production-ready implementations
• Follow framework-specific best practices
• Optimize for performance and accessibility