Files
sim/.claude/rules/emcn-components.md
Emir Karabeg 2daf34386e fix(copilot): ui/ux (#2891)
* feat(claude): added rules

* fix(copilot): chat loading; refactor(copilot): components, utils, hooks

* fix(copilot): options selection strikethrough

* fix(copilot): options render inside thinking

* fix(copilot): checkpoints, user-input; improvement(code): colors

* fix(copilot): scrolling, tool-call truncation, thinking ui

* fix(copilot): tool call spacing and shimmer/actions on previous messages

* improvement(copilot): queue

* addressed comments
2026-01-19 23:23:21 -08:00

822 B

paths
paths
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)

const buttonVariants = cva('base-classes', {
  variants: { variant: { default: '...', primary: '...' } }
})
export { Button, buttonVariants }

Use direct className when: Single consistent style, no variations

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