Cursor Rules – Guia de Boas Práticas

October 13, 2025 · 5 min read
Fundador da @TautornTech
Cursor Rules
Crie um arquivo .cursorrules no seu projeto para que as regras funcionem.
Um guia completo de boas práticas para desenvolvimento com Cursor AI. Copie e cole as regras abaixo no seu arquivo .cursorrules para melhorar a experiência de desenvolvimento.
Como usar

Copie todo o conteúdo do bloco de código abaixo
Cole no arquivo .cursorrules na raiz do seu projeto
Ajuste conforme necessário para o seu contexto
# 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
```bash
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
* Works on mobile, tablet and desktop
* Tailwind breakpoints: sm, md, lg, xl, 2xl (Tailwind default)

---

### Initial Tables

- **Database:** Supabase  
- **Initial Tables:** `{TABLE}`

| Field    | Type    | Description                          |
|----------|---------|-------------------------------------|
| COLUMN       | uuid    | Unique identifier                |
| COLUMN       | text    | income, expense, investment, etc.  |
| COLUMN       | numeric | Entry value                   |
| COLUMN       | text    | Financial category               |
| COLUMN       | date    | Transaction date                  |
| COLUMN       | 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
```css
/* 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.
Benefícios

Respostas diretas e objetivas
Código limpo e consistente
Animações performáticas
Mobile first approach
Como usar​

Benefícios​

Como usar

Benefícios
