mirror of
https://github.com/simstudioai/sim.git
synced 2026-01-06 21:54:01 -05:00
9208375523
* feat(cursorrules): updated cursorrules and claude md file * added rules for adding new integrations
36 lines
865 B
Plaintext
36 lines
865 B
Plaintext
---
|
|
description: EMCN component library patterns
|
|
globs: ["apps/sim/components/emcn/**"]
|
|
---
|
|
|
|
# EMCN Components
|
|
|
|
Import from `@/components/emcn`, never from subpaths (except CSS files).
|
|
|
|
## CVA vs Direct Styles
|
|
|
|
**Use CVA when:** 2+ variants (primary/secondary, sm/md/lg)
|
|
|
|
```tsx
|
|
const buttonVariants = cva('base-classes', {
|
|
variants: { variant: { default: '...', primary: '...' } }
|
|
})
|
|
export { Button, buttonVariants }
|
|
```
|
|
|
|
**Use direct className when:** Single consistent style, no variations
|
|
|
|
```tsx
|
|
function Label({ 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]`
|
|
- `transition-colors` for hover states
|