Customize Your Workspace

Editor Settings

Customize the look and feel:

• **Theme**: Dark, light, or custom (Settings → Theme)
• **Font**: Change font family and size
• **Keybindings**: Remap keys to match your muscle memory
• **Tabs vs Spaces**: Choose your indentation style
• **Auto-save**: Enable/disable automatic saving

Extensions: Power Up Your Editor

Extensions add capabilities. Click the Extensions icon (puzzle) in the left sidebar:

• **Prettier**: Auto-format code to be clean and consistent
• **ESLint**: Catch code errors and style issues
• **Tailwind CSS IntelliSense**: Smart Tailwind class suggestions
• **Thunder Client**: Test APIs without leaving Cursor
• **Live Server**: Preview changes in browser in real-time
• **GitHub Copilot** (optional): Add GitHub's Copilot alongside Cursor's AI

.cursorrules: Train Your AI

Create a .cursorrules file in your project root with instructions for the AI:

# Design System
Use Tailwind CSS for all styling. Primary color: blue-600. Secondary: gray-900.

# Components
All components go in /components directory. Use PascalCase for names.

# Testing
Write tests for all components using Vitest.

# Best Practices
- Use functional components with hooks
- Keep components under 200 lines
- Add proper error handling
- Make components responsive
- Include accessibility (WCAG AA)

Cursor reads this file and uses it to guide code generation. Whenever it generates code, it follows your rules.

Rules for AI: Chat Settings

Go to Settings → Features → Chat & Composer → Rules for AI. Add custom instructions:

• "Always add comments to complex code"
• "Prefer modern React hooks over class components"
• "Include TypeScript types"
• "Make accessibility a priority"

Terminal Integration

The terminal at the bottom of Cursor is powerful:

• Use Cmd+K to generate shell commands
• Run npm scripts, git commands, builds
• See output in real-time
• Stay in Cursor, no need to switch apps