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-components.mdc

@@ -6,59 +6,43 @@ globs: ["apps/sim/**/*.tsx"]
 # Component Patterns
 
 ## Structure Order
+
 ```typescript
 'use client' // Only if using hooks
 
-// 1. Imports (external → internal → relative)
-// 2. Constants at module level
+// Imports (external → internal)
+// Constants at module level
 const CONFIG = { SPACING: 8 } as const
 
-// 3. Props interface with TSDoc
+// Props interface
 interface ComponentProps {
-  /** Description */
   requiredProp: string
   optionalProp?: boolean
 }
 
-// 4. Component with TSDoc
 export function Component({ requiredProp, optionalProp = false }: ComponentProps) {
   // a. Refs
   // b. External hooks (useParams, useRouter)
   // c. Store hooks
   // d. Custom hooks
   // e. Local state
-  // f. useMemo computations
-  // g. useCallback handlers
+  // f. useMemo
+  // g. useCallback
   // h. useEffect
   // i. Return JSX
 }
 ```
 
 ## Rules
-1. Add `'use client'` when using React hooks
+
+1. `'use client'` only when using React hooks
 2. Always define props interface
-3. TSDoc on component: description, @param, @returns
-4. Extract constants with `as const`
-5. Use Tailwind only, no inline styles
-6. Semantic HTML (`aside`, `nav`, `article`)
-7. Include ARIA attributes where appropriate
-8. Optional chain callbacks: `onAction?.(id)`
+3. Extract constants with `as const`
+4. Semantic HTML (`aside`, `nav`, `article`)
+5. Optional chain callbacks: `onAction?.(id)`
 
-## Factory Pattern with Caching
+## Component Extraction
 
-When generating components for a specific signature (e.g., icons):
+**Extract when:** 50+ lines, used in 2+ files, or has own state/logic
 
-```typescript
-const cache = new Map<string, React.ComponentType<{ className?: string }>>()
-
-function getColorIcon(color: string) {
-  if (cache.has(color)) return cache.get(color)!
-  
-  const Icon = ({ className }: { className?: string }) => (
-    <div className={cn(className, 'rounded-[3px]')} style={{ backgroundColor: color, width: 10, height: 10 }} />
-  )
-  Icon.displayName = `ColorIcon(${color})`
-  cache.set(color, Icon)
-  return Icon
-}
-```
+**Keep inline when:** < 10 lines, single use, purely presentational