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

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

* added rules for adding new integrations
This commit is contained in:
Waleed
2025-12-30 10:58:33 -08:00
committed by GitHub
parent df099e9485
commit 9208375523
13 changed files with 771 additions and 227 deletions

View File

@@ -1,45 +1,35 @@
---
description: EMCN component library patterns with CVA
description: EMCN component library patterns
globs: ["apps/sim/components/emcn/**"]
---
# EMCN Component Guidelines
# EMCN Components
## When to Use CVA vs Direct Styles
Import from `@/components/emcn`, never from subpaths (except CSS files).
**Use CVA (class-variance-authority) when:**
- 2+ visual variants (primary, secondary, outline)
- Multiple sizes or state variations
- Example: Button with variants
## CVA vs Direct Styles
**Use direct className when:**
- Single consistent style
- No variations needed
- Example: Label with one style
**Use CVA when:** 2+ variants (primary/secondary, sm/md/lg)
## Patterns
**With CVA:**
```tsx
const buttonVariants = cva('base-classes', {
variants: {
variant: { default: '...', primary: '...' },
size: { sm: '...', md: '...' }
}
variants: { variant: { default: '...', primary: '...' } }
})
export { Button, buttonVariants }
```
**Without CVA:**
**Use direct className when:** Single consistent style, no variations
```tsx
function Label({ className, ...props }) {
return <Primitive className={cn('single-style-classes', className)} {...props} />
return <Primitive className={cn('style-classes', className)} {...props} />
}
```
## Rules
- Use Radix UI primitives for accessibility
- Export component and variants (if using CVA)
- TSDoc with usage examples
- Consistent tokens: `font-medium`, `text-[12px]`, `rounded-[4px]`
- Always use `transition-colors` for hover states
- `transition-colors` for hover states