feat(cursorrules): updated cursorrules and claude md file (#2640)

* feat(cursorrules): updated cursorrules and claude md file

* added rules for adding new integrations

.cursor/rules/sim-styling.mdc

@@ -6,13 +6,14 @@ globs: ["apps/sim/**/*.tsx", "apps/sim/**/*.css"]
 # Styling Rules
 
 ## Tailwind
-1. **No inline styles** - Use Tailwind classes exclusively
-2. **No duplicate dark classes** - Don't add `dark:` when value matches light mode
-3. **Exact values** - Use design system values (`text-[14px]`, `h-[25px]`)
-4. **Prefer px** - Use `px-[4px]` over `px-1`
-5. **Transitions** - Add `transition-colors` for interactive states
+
+1. **No inline styles** - Use Tailwind classes
+2. **No duplicate dark classes** - Skip `dark:` when value matches light mode
+3. **Exact values** - `text-[14px]`, `h-[25px]`
+4. **Transitions** - `transition-colors` for interactive states
 
 ## Conditional Classes
+
 ```typescript
 import { cn } from '@/lib/utils'
 
@@ -23,25 +24,17 @@ import { cn } from '@/lib/utils'
 )} />
 ```
 
-## CSS Variables for Dynamic Styles
+## CSS Variables
+
+For dynamic values (widths, heights) synced with stores:
+
 ```typescript
-// In store setter
-setSidebarWidth: (width) => {
-  set({ sidebarWidth: width })
+// In store
+setWidth: (width) => {
+  set({ width })
   document.documentElement.style.setProperty('--sidebar-width', `${width}px`)
 }
 
 // In component
 <aside style={{ width: 'var(--sidebar-width)' }} />
 ```
-
-## Anti-Patterns
-```typescript
-// ❌ Bad
-<div style={{ width: 200 }}>
-<div className='text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-
-// ✅ Good
-<div className='w-[200px]'>
-<div className='text-[var(--text-primary)]'>
-```