Skip to main content

Cursor Rules – Best Practices Guide

· 7 min read
Bruno Carneiro
Bruno Carneiro
Fundador da @TautornTech

A complete guide to best practices for development with Cursor AI. Copy and paste the rules below into your .cursorrules file to enhance your development experience.

What are Cursor Rules?​

Cursor Rules are persistent instructions that guide your AI coding assistant's behavior. They allow you to customize how Cursor understands and works with your codebase, ensuring consistency and adherence to your project's standards.

Create a .cursorrules file in your project root for the rules to take effect.

How to Use​

  1. Copy the entire content from the code block below
  2. Paste it into a .cursorrules file in your project root
  3. Adjust according to your specific context and needs

Example: Financial Assistant Project Rules​

Here's a comprehensive example of Cursor Rules for a financial assistant application:

# Cursor Rules – Financial Assistant

## Style Guide (Important)
- Be **direct in responses**, without unnecessary explanations
- Don't add comments unless requested
- **Simplicity above all** — focus on clarity and consistency
- Always use subtle micro-interactions on interactive elements
- Respect the **color palette by category**
- Prioritize UX: animations should improve experience, not distract

---

## Summary for New Contributors
1. This project creates a **modern financial assistant** for personal and family organization
2. **Mobile first** interface, responsive and professional
3. Main areas: **income, accounts, investments, goals**
4. Always follow the **design system**, **color palette by category** and **animation patterns**
5. Main stack: React + TypeScript + Tailwind + Supabase

---

## Project Objective
Create a **simple and modern financial assistant** to help families or individuals organize:
- Family net income
- Monthly bills
- Investments
- Dreams / goals

The interface should be **intuitive, professional and responsive (mobile first)**.

---

## Project Stack
- ReactJS + TypeScript
- TailwindCSS
- Shadcn/UI
- React Router
- BigNumber
- Lucide Icons
- Supabase (auth + database)

---

## Architecture

src/ ├── components/ # Reusable components ├── pages/ # System pages ├── config/ # Configurations ├── context/ # Application context ├── commons/ # Common files and functions for the system │ ├── utils # Utility functions │ └── constants # Shared constants ├── layouts/ # System layouts └── lib/ └── supabaseClient.ts # Supabase connection configuration


---

## Responsiveness
- Mobile first approach
- Works on mobile, tablet and desktop
- Tailwind breakpoints: sm, md, lg, xl, 2xl (Tailwind default)

---

## Database Schema

### Initial Tables

- **Database:** Supabase
- **Initial Tables:** `transactions`

| Field      | Type    | Description                          |
|------------|---------|--------------------------------------|
| id         | uuid    | Unique identifier                    |
| type       | text    | income, expense, investment, etc.    |
| value      | numeric | Entry value                          |
| category   | text    | Financial category                   |
| date       | date    | Transaction date                     |
| notes      | text    | Optional observations                 |

---

## Design System – Color Palette by Category

### Thematic Color System (ALWAYS USE THESE COLORS)
Each financial category has its specific color. Use global CSS classes:

#### **Text Classes**
- `text-income` → **Income** → Green `#10B981`
- `text-expense` → **Expenses** → Red `#EF4444`
- `text-investment` → **Investments** → Blue `#3B82F6`
- `text-account` → **Accounts** → Yellow/Amber `#F59E0B`
- `text-goal` → **Goals** → Cyan `#06B6D4`
- `text-patrimony` → **Patrimony** → Purple/Violet `#8B5CF6`
- `text-asset` → **Assets** → Pink `#EC4899`

#### **Background Classes**
- `bg-income`, `bg-expense`, `bg-investment`, `bg-account`, `bg-goal`, `bg-patrimony`, `bg-asset`

#### **CSS Variables** (for direct use when needed)
- `var(--income)`, `var(--expense)`, `var(--investment)`, `var(--account)`, `var(--goal)`, `var(--patrimony)`, `var(--asset)`

### Usage Rules
1. **ALWAYS** use the color corresponding to the category
2. For income icons: `className="text-income"`
3. For expense values: `className="text-expense font-semibold"`
4. For goal progress bars: `className="bg-goal"`
5. **Immediate visual identification**: user should know the category just by looking at the color

### Neutral Colors (backgrounds and structure)
- Main background → `#0B0B0C` (black-deep)
- Cards/containers → `#1A1A1D` (gray-graphite) with `bg-slate-800/30`
- Borders → `#2C2C30` (gray-charcoal) with `border-slate-700`
- Main text → `#F5F5F7` with `text-slate-200`
- Secondary text → `#A6A6AD` with `text-slate-400`

---

## Default Theme
- Dark theme by default
- Emerald Green (#10B981) as primary brand color
- Shadcn/UI components respect the category color palette
- Always use thematic classes for visual consistency

---

## Micro-Interactions and Animations

### Principles
- Subtle and contextual
- Use `transform` and `opacity` for performance
- Respect `prefers-reduced-motion`
- Animations should reinforce the element's purpose

### Common Animations Table

| Name / Class                                       | Typical Use                    |
|----------------------------------------------------|--------------------------------|
| `animate-in slide-in-from-bottom-4 fade-in-0`     | Staggered list entries         |
| `group-hover:scale-[1.03] group-hover:-translate-y-1` | Smart card hover            |
| `animate-pulse`                                    | Loading or subtle highlight    |
| `animate-ping`                                     | Notifications or markers       |
| `animate-bounce`                                   | Playful or error elements      |

### Default Durations
- **Micro-interactions:** `duration-200` to `duration-300`
- **Main transitions:** `duration-500`
- **Complex animations:** `duration-700` to `duration-1000`

### Easing Functions
- **Smooth:** `ease-in-out` (default)
- **Bounce:** `animate-bounce`
- **Pulse:** `animate-pulse`
- **Ping:** `animate-ping`

### Performance
- Always use `transform` and `opacity`
- Avoid animating `width`, `height`, `top`, `left`
- Prefer `translate`, `scale`, `rotate`
- Use `will-change: transform` for frequently animated elements

#### **Loading States**
```css
/* Elegant loading spinner */
<div className="w-12 h-12 border-4 border-blue-tech/20 border-t-blue-tech rounded-full animate-spin" />

/* Loading with animated dots */
<div className="flex justify-center gap-1">
  <div className="w-2 h-2 bg-blue-tech/60 rounded-full animate-bounce" />
  <div className="w-2 h-2 bg-blue-tech/60 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }} />
  <div className="w-2 h-2 bg-blue-tech/60 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }} />
</div>

Visual Feedback​

  • Success: Green with animate-pulse
  • Error: Red with animate-bounce
  • Loading: Blue with animate-spin
  • Hover: Context-specific colors

Color Palette for Animations​

/* Vibrant but subtle colors */
blue-400, purple-400, emerald-400, amber-400
/* Opacities for overlays */
/10, /20, /30, /40, /50, /60
/* Smooth gradients */
from-color-500/20 to-color-600/10

Final Considerations​

  • Respond directly and objectively, without unnecessary explanations
  • Don't add extra comments unless requested
  • Keep language simple and clear
  • Provide summarized and focused responses on what was done, without repeating context
  • Always implement smooth and intelligent micro-interactions on interactive components
  • Use the contextual color system to reinforce visual identity
  • Prioritize animations that enhance user experience without creating distractions

## Benefits

By implementing these Cursor Rules, you'll experience:

- **Direct and objective responses** from the AI assistant
- **Clean and consistent code** following your project standards
- **Performant animations** that enhance UX without impacting performance
- **Mobile-first approach** ensuring responsive design from the start

## Customizing for Your Project

This example is tailored for a financial assistant application. To adapt it for your project:

1. **Update the project objective** to match your application's purpose
2. **Modify the tech stack** to reflect your actual dependencies
3. **Adjust the color palette** to match your design system
4. **Customize the architecture** to fit your folder structure
5. **Update database schema** if applicable to your project

## Best Practices

When creating your own Cursor Rules:

- **Be specific**: Clear instructions yield better results
- **Stay organized**: Use sections and headers for readability
- **Keep it updated**: Review and update rules as your project evolves
- **Document decisions**: Explain the "why" behind important rules
- **Test and iterate**: Refine rules based on actual usage

## Conclusion

Cursor Rules are a powerful way to customize your AI coding assistant's behavior. By providing clear, structured instructions, you can ensure that Cursor understands your project's context, follows your coding standards, and helps you build better software more efficiently.

Start with this template and adapt it to your specific needs. The more detailed and context-aware your rules are, the more valuable Cursor becomes as your coding partner.

---

**Want to learn more?** Check out our other articles about Cursor:
- [Cursor Agents – Revolutionizing Software Development](/blog/cursor-agents-revolucionando-desenvolvimento)
- [Cursor Rules – Customizing Your Development Experience](/blog/cursor-rules-personalizando-experiencia)
- [Cursor Commands – Automation and Productivity](/blog/cursor-commands-automacao-produtividade)