Cursor rule

1---
2description: UI patterns and presentation components
3globs: web/src/presentation/**/*.ts, web/src/presentation/**/*.css
4alwaysApply: false
5---
6 
7# UI and Presentation
8 
9## Professional Look with Low Complexity
10 
11- Clean, professional appearance using pure CSS (no CSS framework)
12- CSS variables for colors, shadows, and spacing (already defined in `styles.css`)
13- Inter font as the typographic standard
14- Responsive layout with native grid/flexbox
15 
16## Component Reuse
17 
18- Use Builders for complex HTML (`ModalBuilder`, `YearDetailsBuilder`)
19- Extract repeated visual patterns into reusable functions/builders
20- Never duplicate markup — if a pattern appears 2+ times, create a builder
21 
22```typescript
23// ❌ Bad: duplicated HTML
24const card1 = `<div class="card"><h3>${title1}</h3>...</div>`;
25const card2 = `<div class="card"><h3>${title2}</h3>...</div>`;
26 
27// ✅ Good: reusable builder
28const card1 = CardBuilder.create(title1).withContent(...).build();
29const card2 = CardBuilder.create(title2).withContent(...).build();
30```
31 
32## Presentation vs Domain Separation
33 
34- Formatters (`BRLFormatter`, `USDFormatter`) belong in `presentation/`
35- Never put calculation logic in builders or UI controllers
36- `PortfolioApp` coordinates the UI but delegates logic to use cases
37- Data arrives at the presentation layer already processed — just format and display
38 
39## CSS
40 
41- Use existing CSS variables (`--color-*`, `--shadow-*`, `--radius-*`)
42- Avoid inline styles — use classes
43- Maintain a single `styles.css` file organized by section
44