mirror of
https://github.com/simstudioai/sim.git
synced 2026-01-09 15:07:55 -05:00
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user