From 6686a6dd1a319cd9a8814966832c585f25b86a56 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 13 Apr 2026 11:22:25 -0700
Subject: [PATCH 1/2] chore(skills): add code quality review skills and cleanup
 command

---
 .agents/skills/cleanup/SKILL.md               |  25 ++
 .agents/skills/emcn-design-review/SKILL.md    | 315 ++++++++++++++++++
 .../react-query-best-practices/SKILL.md       |  54 +++
 .../you-might-not-need-a-callback/SKILL.md    |  51 +++
 .../skills/you-might-not-need-a-memo/SKILL.md |  33 ++
 .../skills/you-might-not-need-state/SKILL.md  |  38 +++
 .claude/commands/cleanup.md                   |  25 ++
 .claude/commands/emcn-design-review.md        | 100 ++++++
 .../commands/react-query-best-practices.md    |  54 +++
 .../commands/you-might-not-need-a-callback.md |  35 ++
 .claude/commands/you-might-not-need-a-memo.md |  33 ++
 .claude/commands/you-might-not-need-state.md  |  38 +++
 .cursor/commands/cleanup.md                   |  20 ++
 .cursor/commands/emcn-design-review.md        |  95 ++++++
 .../commands/react-query-best-practices.md    |  49 +++
 .../commands/you-might-not-need-a-callback.md |  30 ++
 .cursor/commands/you-might-not-need-a-memo.md |  28 ++
 .cursor/commands/you-might-not-need-state.md  |  33 ++
 18 files changed, 1056 insertions(+)
 create mode 100644 .agents/skills/cleanup/SKILL.md
 create mode 100644 .agents/skills/emcn-design-review/SKILL.md
 create mode 100644 .agents/skills/react-query-best-practices/SKILL.md
 create mode 100644 .agents/skills/you-might-not-need-a-callback/SKILL.md
 create mode 100644 .agents/skills/you-might-not-need-a-memo/SKILL.md
 create mode 100644 .agents/skills/you-might-not-need-state/SKILL.md
 create mode 100644 .claude/commands/cleanup.md
 create mode 100644 .claude/commands/emcn-design-review.md
 create mode 100644 .claude/commands/react-query-best-practices.md
 create mode 100644 .claude/commands/you-might-not-need-a-callback.md
 create mode 100644 .claude/commands/you-might-not-need-a-memo.md
 create mode 100644 .claude/commands/you-might-not-need-state.md
 create mode 100644 .cursor/commands/cleanup.md
 create mode 100644 .cursor/commands/emcn-design-review.md
 create mode 100644 .cursor/commands/react-query-best-practices.md
 create mode 100644 .cursor/commands/you-might-not-need-a-callback.md
 create mode 100644 .cursor/commands/you-might-not-need-a-memo.md
 create mode 100644 .cursor/commands/you-might-not-need-state.md

diff --git a/.agents/skills/cleanup/SKILL.md b/.agents/skills/cleanup/SKILL.md
new file mode 100644
index 0000000000..54438a9b81
--- /dev/null
+++ b/.agents/skills/cleanup/SKILL.md
@@ -0,0 +1,25 @@
+---
+name: cleanup
+description: Run all code quality skills in sequence — effects, memo, callbacks, state, React Query, and emcn design review
+---
+
+# Cleanup
+
+Arguments:
+- scope: what to review (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Steps
+
+Run each of these skills in order on the specified scope, passing through the scope and fix arguments. After each skill completes, move to the next. Do not skip any.
+
+1. `/you-might-not-need-an-effect $ARGUMENTS`
+2. `/you-might-not-need-a-memo $ARGUMENTS`
+3. `/you-might-not-need-a-callback $ARGUMENTS`
+4. `/you-might-not-need-state $ARGUMENTS`
+5. `/react-query-best-practices $ARGUMENTS`
+6. `/emcn-design-review $ARGUMENTS`
+
+After all skills have run, output a summary of what was found and fixed (or proposed) across all six passes.
diff --git a/.agents/skills/emcn-design-review/SKILL.md b/.agents/skills/emcn-design-review/SKILL.md
new file mode 100644
index 0000000000..2c5246ce27
--- /dev/null
+++ b/.agents/skills/emcn-design-review/SKILL.md
@@ -0,0 +1,315 @@
+---
+name: emcn-design-review
+description: Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions
+---
+
+# EMCN Design Review
+
+Arguments:
+- scope: what to review (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Context
+
+This codebase uses **emcn**, a custom component library built on Radix UI primitives with CVA (class-variance-authority) variants and CSS variable design tokens. All UI must use emcn components and tokens — never raw HTML elements or hardcoded colors.
+
+## Steps
+
+1. Read the emcn barrel export at `apps/sim/components/emcn/components/index.ts` to know what's available
+2. Read `apps/sim/app/_styles/globals.css` for the full set of CSS variable tokens
+3. Analyze the specified scope against every rule below
+4. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
+
+---
+
+## Imports
+
+- Import components from `@/components/emcn`, never from subpaths
+- Import icons from `@/components/emcn/icons` or `lucide-react`
+- Import `cn` from `@/lib/core/utils/cn` for conditional class merging
+- Import app-specific wrappers (Select, VerifiedBadge) from `@/components/ui`
+
+```tsx
+// Good
+import { Button, Modal, Badge } from '@/components/emcn'
+// Bad
+import { Button } from '@/components/emcn/components/button/button'
+```
+
+---
+
+## Design Tokens (CSS Variables)
+
+Never use raw color values. Always use CSS variable tokens via Tailwind arbitrary values.
+
+### Text hierarchy
+| Token | Use |
+|-------|-----|
+| `text-[var(--text-primary)]` | Main content text |
+| `text-[var(--text-secondary)]` | Secondary/supporting text |
+| `text-[var(--text-tertiary)]` | Tertiary text |
+| `text-[var(--text-muted)]` | Disabled, placeholder text |
+| `text-[var(--text-icon)]` | Icon tinting |
+| `text-[var(--text-inverse)]` | Text on dark backgrounds |
+| `text-[var(--text-error)]` | Error/warning messages |
+
+### Surfaces (elevation)
+| Token | Use |
+|-------|-----|
+| `bg-[var(--bg)]` | Page background |
+| `bg-[var(--surface-2)]` through `bg-[var(--surface-7)]` | Increasing elevation |
+| `bg-[var(--surface-hover)]` | Hover state backgrounds |
+| `bg-[var(--surface-active)]` | Active/selected backgrounds |
+
+### Borders
+| Token | Use |
+|-------|-----|
+| `border-[var(--border)]` | Default borders |
+| `border-[var(--border-1)]` | Stronger borders (inputs, cards) |
+| `border-[var(--border-muted)]` | Subtle dividers |
+
+### Status
+| Token | Use |
+|-------|-----|
+| `--success` | Success states |
+| `--error` | Error states |
+| `--caution` | Warning states |
+
+### Brand
+| Token | Use |
+|-------|-----|
+| `--brand-secondary` | Brand color |
+| `--brand-accent` | Accent/CTA color |
+
+### Shadows
+Use shadow tokens, never raw box-shadow values:
+- `shadow-subtle`, `shadow-medium`, `shadow-overlay`
+- `shadow-kbd`, `shadow-card`
+
+### Z-Index
+Use z-index tokens for layering:
+- `z-[var(--z-dropdown)]` (100), `z-[var(--z-modal)]` (200), `z-[var(--z-popover)]` (300), `z-[var(--z-tooltip)]` (400), `z-[var(--z-toast)]` (500)
+
+---
+
+## Component Usage Rules
+
+### Buttons
+Available variants: `default`, `primary`, `destructive`, `ghost`, `outline`, `active`, `secondary`, `tertiary`, `subtle`, `ghost-secondary`, `3d`
+
+| Action type | Variant |
+|-------------|---------|
+| Primary action (create, save, submit) | `primary` |
+| Cancel, close, secondary action | `default` |
+| Delete, remove, destructive action | `destructive` |
+| Toolbar/icon-only button | `ghost` |
+| Toggle, mode switch | `ghost` or `outline` |
+| Active/selected state | `active` |
+
+Sizes: `sm` (compact) or `md` (default). Never create custom button styles — use an existing variant.
+
+### Modals (Dialogs)
+Use `Modal` + subcomponents. Never build custom dialog overlays.
+
+```tsx
+<Modal open={open} onOpenChange={setOpen}>
+  <ModalContent size="sm">
+    <ModalHeader>Title</ModalHeader>
+    <ModalBody>Content</ModalBody>
+    <ModalFooter>
+      <Button variant="default" onClick={() => setOpen(false)}>Cancel</Button>
+      <Button variant="primary" onClick={handleSubmit}>Save</Button>
+    </ModalFooter>
+  </ModalContent>
+</Modal>
+```
+
+Modal sizes: `sm` (440px, confirmations), `md` (500px, forms), `lg` (600px, content-heavy), `xl` (800px, complex editors), `full` (1200px, dashboards).
+
+Footer buttons: Cancel on left, primary action on right.
+
+### Delete Confirmations
+Always use Modal with this pattern:
+
+```tsx
+<Modal open={open} onOpenChange={setOpen}>
+  <ModalContent size="sm">
+    <ModalHeader>Delete {itemType}</ModalHeader>
+    <ModalBody>
+      <p>Description of consequences</p>
+      <p className="text-[var(--text-error)]">Warning about irreversibility</p>
+      {/* Optional: confirmation text input for high-risk actions */}
+    </ModalBody>
+    <ModalFooter>
+      <Button variant="default" onClick={() => setOpen(false)}>Cancel</Button>
+      <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
+        Delete
+      </Button>
+    </ModalFooter>
+  </ModalContent>
+</Modal>
+```
+
+Rules:
+- Title: "Delete {ItemType}"
+- Include consequence description
+- Use `text-[var(--text-error)]` for warning text
+- Destructive button on the right
+- For high-risk deletes (workspaces), require typing the name to confirm
+- Include recovery info if soft-delete: "You can restore it from Recently Deleted in Settings"
+
+### Toast Notifications
+Use the imperative `toast` API. Never build custom notification UI.
+
+```tsx
+import { toast } from '@/components/emcn'
+
+toast.success('Item saved')
+toast.error('Something went wrong')
+toast.success('Deleted', { action: { label: 'Undo', onClick: handleUndo } })
+```
+
+Variants: `default`, `success`, `error`. Auto-dismiss after 5s.
+
+### Badges
+Use semantic color variants for status:
+
+| Status | Variant |
+|--------|---------|
+| Success, active, online | `green` |
+| Error, failed, offline | `red` |
+| Warning, processing | `amber` or `orange` |
+| Info, default | `blue` |
+| Neutral, draft, inactive | `gray` |
+| Type labels | `type` |
+
+Use `dot` prop for status indicators. Use `icon` prop for icon badges.
+
+### Tooltips
+Use `Tooltip` from emcn with namespace pattern:
+
+```tsx
+<Tooltip.Root>
+  <Tooltip.Trigger asChild>
+    <Button variant="ghost">{icon}</Button>
+  </Tooltip.Trigger>
+  <Tooltip.Content>Helpful text</Tooltip.Content>
+</Tooltip.Root>
+```
+
+Use tooltips for icon-only buttons and truncated text. Don't tooltip self-explanatory elements.
+
+### Popovers
+Use for filters, option menus, and nested navigation:
+
+```tsx
+<Popover open={open} onOpenChange={setOpen} size="sm">
+  <PopoverTrigger asChild>
+    <Button variant="ghost">Trigger</Button>
+  </PopoverTrigger>
+  <PopoverContent side="bottom" align="end" minWidth={160}>
+    <PopoverSection>Section Title</PopoverSection>
+    <PopoverItem active={isActive} onClick={handleClick}>
+      Item Label
+    </PopoverItem>
+    <PopoverDivider />
+  </PopoverContent>
+</Popover>
+```
+
+### Dropdown Menus
+Use for context menus and action menus:
+
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="ghost">
+      <MoreHorizontal className="h-4 w-4" />
+    </Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end">
+    <DropdownMenuItem onClick={handleEdit}>Edit</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem onClick={handleDelete} className="text-[var(--text-error)]">
+      Delete
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+Destructive items go last, after a separator, in error color.
+
+### Forms
+Use `FormField` wrapper for labeled inputs:
+
+```tsx
+<FormField label="Name" htmlFor="name" error={errors.name} optional>
+  <Input id="name" value={name} onChange={e => setName(e.target.value)} />
+</FormField>
+```
+
+Rules:
+- Use `Input` from emcn, never raw `<input>`
+- Use `Textarea` from emcn, never raw `<textarea>`
+- Use `FormField` for label + input + error layout
+- Mark optional fields with `optional` prop
+- Show errors inline below the input
+- Use `Combobox` for searchable selects
+- Use `TagInput` for multi-value inputs
+
+### Loading States
+Use `Skeleton` for content placeholders:
+
+```tsx
+<Skeleton className="h-5 w-[200px] rounded-md" />
+```
+
+Rules:
+- Mirror the actual UI structure with skeletons
+- Match exact dimensions of the final content
+- Use `rounded-md` to match component radius
+- Stack multiple skeletons for lists
+
+### Icons
+Standard sizing pattern:
+
+```tsx
+<Icon className="h-[14px] w-[14px] text-[var(--text-icon)]" />
+```
+
+Common sizes: `h-3 w-3` (12px), `h-[14px] w-[14px]`, `h-4 w-4` (16px).
+
+---
+
+## Styling Rules
+
+1. **Use `cn()` for conditional classes**: `cn('base', condition && 'conditional')`
+2. **Never use inline styles**: Use Tailwind classes exclusively
+3. **Never hardcode colors**: Use CSS variable tokens (`var(--text-primary)`, not `#333`)
+4. **Never use global styles**: Keep all styling local to components
+5. **Hover states**: Use `hover-hover:` pseudo-class for hover-capable devices
+6. **Transitions**: Use `transition-colors` for color changes, `transition-colors duration-100` for fast hover
+7. **Border radius**: `rounded-lg` (large cards), `rounded-md` (medium), `rounded-sm` (small), `rounded-xs` (tiny)
+8. **Typography**: Use semantic sizes — `text-small` (13px), `text-caption` (12px), `text-xs` (11px), `text-micro` (10px)
+9. **Font weight**: Use `font-medium` for emphasis, avoid `font-bold` unless for headings
+10. **Spacing**: Use Tailwind gap/padding utilities. Common patterns: `gap-2`, `gap-3`, `px-4 py-2.5`
+
+---
+
+## Anti-patterns to flag
+
+- Raw HTML elements (`<button>`, `<input>`, `<dialog>`) instead of emcn components
+- Hardcoded color values (`#fff`, `rgb(0,0,0)`, `text-gray-500`)
+- Custom modal/dialog implementations instead of `Modal`
+- Custom toast/notification implementations instead of `toast`
+- Inline styles (`style={{ color: 'red' }}`)
+- Missing `cn()` for conditional classes (string concatenation instead)
+- Wrong button variant for the action type
+- Missing loading/skeleton states
+- Missing error states on forms
+- Using `@/components/ui/button` when `@/components/emcn` Button should be used
+- Importing from emcn subpaths instead of barrel
+- Using `z-50`, `z-[9999]` instead of z-index tokens
+- Custom shadows instead of shadow tokens
diff --git a/.agents/skills/react-query-best-practices/SKILL.md b/.agents/skills/react-query-best-practices/SKILL.md
new file mode 100644
index 0000000000..fd8da06363
--- /dev/null
+++ b/.agents/skills/react-query-best-practices/SKILL.md
@@ -0,0 +1,54 @@
+---
+name: react-query-best-practices
+description: Audit React Query usage for best practices — key factories, staleTime, mutations, and server state ownership
+---
+
+# React Query Best Practices
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/hooks/queries/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Context
+
+This codebase uses React Query (TanStack Query) as the single source of truth for all server state. All query hooks live in `hooks/queries/`. Zustand is used only for client-only UI state. Server data must never be duplicated into useState or Zustand outside of mutation callbacks that coordinate cross-store state.
+
+## References
+
+Read these before analyzing:
+1. https://tkdodo.eu/blog/practical-react-query — foundational defaults, custom hooks, avoiding local state copies
+2. https://tkdodo.eu/blog/effective-react-query-keys — key factory pattern, hierarchical keys, fuzzy invalidation
+3. https://tkdodo.eu/blog/react-query-as-a-state-manager — React Query IS your server state manager
+
+## Rules to enforce
+
+### Query key factories
+- Every file in `hooks/queries/` must have a hierarchical key factory with an `all` root key
+- Keys must include intermediate plural keys (`lists`, `details`) for prefix invalidation
+- Key factories are colocated with their query hooks, not in a global keys file
+
+### Query hooks
+- Every `queryFn` must forward `signal` for request cancellation
+- Every query must have an explicit `staleTime` (default 0 is almost never correct)
+- `keepPreviousData` / `placeholderData` only on variable-key queries (where params change), never on static keys
+- Use `enabled` to prevent queries from running without required params
+
+### Mutations
+- Use `onSettled` (not `onSuccess`) for cache reconciliation — it fires on both success and error
+- For optimistic updates: save previous data in `onMutate`, roll back in `onError`
+- Use targeted invalidation (`entityKeys.lists()`) not broad (`entityKeys.all`) when possible
+- Don't include mutation objects in `useCallback` deps — `.mutate()` is stable
+
+### Server state ownership
+- Never copy query data into useState. Use query data directly in components.
+- Never copy query data into Zustand stores (exception: mutation callbacks that coordinate cross-store state like temp ID replacement)
+- The query cache is not a local state manager — `setQueryData` is for optimistic updates only
+- Forms are the one deliberate exception: copy server data into local form state with `staleTime: Infinity`
+
+## Steps
+
+1. Read the references above to understand the guidelines
+2. Analyze the specified scope against the rules listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.agents/skills/you-might-not-need-a-callback/SKILL.md b/.agents/skills/you-might-not-need-a-callback/SKILL.md
new file mode 100644
index 0000000000..d621465957
--- /dev/null
+++ b/.agents/skills/you-might-not-need-a-callback/SKILL.md
@@ -0,0 +1,51 @@
+---
+name: you-might-not-need-a-callback
+description: Analyze and fix useCallback anti-patterns in your code
+---
+
+# You Might Not Need a Callback
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## References
+
+Read before analyzing:
+1. https://react.dev/reference/react/useCallback — official docs on when useCallback is actually needed
+
+## When useCallback IS needed
+
+- Passing a callback to a child wrapped in `React.memo` (to preserve referential equality)
+- The callback is a dependency of another hook (`useEffect`, `useMemo`)
+- The callback is used in a custom hook that documents referential stability requirements
+
+## Anti-patterns to detect
+
+1. **useCallback on functions not passed as props or deps**: If the function is only called within the same component and isn't in any dependency array, useCallback adds overhead for no benefit. Just declare the function normally.
+2. **useCallback with exhaustive deps that change every render**: If the dependency array includes values that change on every render, useCallback recalculates every time. The memoization is wasted. Either stabilize the deps (use refs) or remove the useCallback.
+3. **useCallback on event handlers passed to native elements**: `<button onClick={handleClick}>` — native elements don't benefit from stable references. Only child components wrapped in React.memo do.
+4. **useCallback wrapping a function that creates new objects/arrays**: If the callback returns `{ ...newObj }` or `[...newArr]`, memoizing the callback doesn't prevent the child from re-rendering due to new return values. The memoization is at the wrong level.
+5. **useCallback with an empty dep array when deps are needed**: Stale closures — the callback captures outdated values. Either add proper deps or use refs for values that shouldn't trigger re-creation.
+6. **Pairing useCallback with React.memo unnecessarily**: If the child component is cheap to render, neither useCallback nor React.memo adds value. Only optimize when you've measured a performance problem.
+7. **useCallback in custom hooks that don't need stable references**: Not every hook return needs to be memoized. Only stabilize callbacks when consumers depend on referential equality.
+
+## Codebase-specific notes
+
+This codebase uses a ref pattern for stable callbacks in hooks:
+```tsx
+const idRef = useRef(id)
+useEffect(() => { idRef.current = id }, [id])
+const fetchData = useCallback(async () => {
+  // use idRef.current instead of id
+}, []) // empty deps because refs are used
+```
+This pattern is correct — don't flag it as an anti-pattern.
+
+## Steps
+
+1. Read the reference above
+2. Analyze the specified scope for the anti-patterns listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.agents/skills/you-might-not-need-a-memo/SKILL.md b/.agents/skills/you-might-not-need-a-memo/SKILL.md
new file mode 100644
index 0000000000..01693dd702
--- /dev/null
+++ b/.agents/skills/you-might-not-need-a-memo/SKILL.md
@@ -0,0 +1,33 @@
+---
+name: you-might-not-need-a-memo
+description: Analyze and fix useMemo/React.memo anti-patterns in your code
+---
+
+# You Might Not Need a Memo
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## References
+
+Read before analyzing:
+1. https://overreacted.io/before-you-memo/ — two techniques to avoid memo entirely
+
+## Anti-patterns to detect
+
+1. **Wrapping a slow component in React.memo when state can be moved down**: If a component re-renders because of state it doesn't use, move that state into a smaller child component instead of memoizing. The slow component stops re-rendering without memo.
+2. **Wrapping in React.memo when children can be lifted up**: If a parent owns state that changes frequently, extract the stateful part and pass the expensive subtree as `children`. Children passed as props don't re-render when the parent's state changes.
+3. **useMemo on cheap computations**: Filtering or mapping a small array, string concatenation, simple arithmetic — these don't need memoization. Only memoize when you've measured a performance problem.
+4. **useMemo with constantly-changing deps**: If the dependency array changes on every render, useMemo does nothing — it recalculates every time. Fix the deps or remove the memo.
+5. **useMemo to create objects/arrays passed as props**: Instead of memoizing to prevent child re-renders, consider whether the child even needs referential stability. If the child doesn't use React.memo or pass it to a dep array, the memo is wasted.
+6. **React.memo on components that always receive new props**: If the parent always passes new objects, arrays, or callbacks, React.memo's shallow comparison always fails. Fix the parent instead of memoizing the child.
+7. **useMemo for derived state**: If you're computing a value from props or state, just compute it inline during render. React renders are fast. `const fullName = first + ' ' + last` doesn't need useMemo.
+
+## Steps
+
+1. Read the reference above to understand the two core techniques (move state down, lift content up)
+2. Analyze the specified scope for the anti-patterns listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.agents/skills/you-might-not-need-state/SKILL.md b/.agents/skills/you-might-not-need-state/SKILL.md
new file mode 100644
index 0000000000..d9b980ed1a
--- /dev/null
+++ b/.agents/skills/you-might-not-need-state/SKILL.md
@@ -0,0 +1,38 @@
+---
+name: you-might-not-need-state
+description: Analyze and fix unnecessary useState, derived state, and server-state-in-local-state anti-patterns
+---
+
+# You Might Not Need State
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Context
+
+This codebase uses React Query for all server state and Zustand for client-only global state. useState should only be used for ephemeral UI concerns (open/closed, hover, local form input). Server data should never be copied into useState or Zustand — React Query is the single source of truth.
+
+## References
+
+Read these before analyzing:
+1. https://react.dev/learn/choosing-the-state-structure — 5 principles for structuring state
+2. https://tkdodo.eu/blog/dont-over-use-state — never store derived/computed values in state
+3. https://tkdodo.eu/blog/putting-props-to-use-state — never mirror props into state via useEffect
+
+## Anti-patterns to detect
+
+1. **Derived state stored in useState**: If a value can be computed from props, other state, or query data, compute it inline during render instead of storing it in state.
+2. **Server state copied into useState**: Never `useState` + `useEffect` to sync React Query data into local state. Use query data directly. The only exception is forms where users edit server data.
+3. **Props mirrored into state**: Never `useState(prop)` + `useEffect(() => setState(prop))`. Use the prop directly, or use a key to reset component state.
+4. **Chained useEffect state updates**: Never chain Effects that set state to trigger other Effects. Calculate all derived values in the event handler or inline during render.
+5. **Storing objects when an ID suffices**: Store `selectedId` not a copy of the selected object. Derive the object: `items.find(i => i.id === selectedId)`.
+6. **State that duplicates Zustand or React Query**: If the data already lives in a store or query cache, don't create a parallel useState.
+
+## Steps
+
+1. Read the references above to understand the guidelines
+2. Analyze the specified scope for the anti-patterns listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.claude/commands/cleanup.md b/.claude/commands/cleanup.md
new file mode 100644
index 0000000000..e0e0f44669
--- /dev/null
+++ b/.claude/commands/cleanup.md
@@ -0,0 +1,25 @@
+---
+description: Run all code quality skills in sequence — effects, memo, callbacks, state, React Query, and emcn design review
+argument-hint: [scope] [fix=true|false]
+---
+
+# Cleanup
+
+Arguments:
+- scope: what to review (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Steps
+
+Run each of these skills in order on the specified scope, passing through the scope and fix arguments. After each skill completes, move to the next. Do not skip any.
+
+1. `/you-might-not-need-an-effect $ARGUMENTS`
+2. `/you-might-not-need-a-memo $ARGUMENTS`
+3. `/you-might-not-need-a-callback $ARGUMENTS`
+4. `/you-might-not-need-state $ARGUMENTS`
+5. `/react-query-best-practices $ARGUMENTS`
+6. `/emcn-design-review $ARGUMENTS`
+
+After all skills have run, output a summary of what was found and fixed (or proposed) across all six passes.
diff --git a/.claude/commands/emcn-design-review.md b/.claude/commands/emcn-design-review.md
new file mode 100644
index 0000000000..b24dde82cf
--- /dev/null
+++ b/.claude/commands/emcn-design-review.md
@@ -0,0 +1,100 @@
+---
+description: Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions
+argument-hint: [scope] [fix=true|false]
+---
+
+# EMCN Design Review
+
+Arguments:
+- scope: what to review (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Context
+
+This codebase uses **emcn**, a custom component library built on Radix UI primitives with CVA (class-variance-authority) variants and CSS variable design tokens. All UI must use emcn components and tokens — never raw HTML elements or hardcoded colors.
+
+## Steps
+
+1. Read the emcn barrel export at `apps/sim/components/emcn/components/index.ts` to know what's available
+2. Read `apps/sim/app/_styles/globals.css` for the full set of CSS variable tokens
+3. Analyze the specified scope against every rule below
+4. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
+
+---
+
+## Imports
+
+- Import components from `@/components/emcn`, never from subpaths
+- Import icons from `@/components/emcn/icons` or `lucide-react`
+- Import `cn` from `@/lib/core/utils/cn` for conditional class merging
+- Import app-specific wrappers (Select, VerifiedBadge) from `@/components/ui`
+
+---
+
+## Design Tokens (CSS Variables)
+
+Never use raw color values. Always use CSS variable tokens via Tailwind arbitrary values.
+
+### Text hierarchy
+- `text-[var(--text-primary)]` — Main content text
+- `text-[var(--text-secondary)]` — Secondary/supporting text
+- `text-[var(--text-tertiary)]` — Tertiary text
+- `text-[var(--text-muted)]` — Disabled, placeholder text
+- `text-[var(--text-icon)]` — Icon tinting
+- `text-[var(--text-error)]` — Error/warning messages
+
+### Surfaces
+- `bg-[var(--bg)]` — Page background
+- `bg-[var(--surface-2)]` through `bg-[var(--surface-7)]` — Increasing elevation
+- `bg-[var(--surface-hover)]` — Hover backgrounds
+- `bg-[var(--surface-active)]` — Active/selected backgrounds
+
+### Borders
+- `border-[var(--border)]` — Default borders
+- `border-[var(--border-1)]` — Stronger borders (inputs, cards)
+
+### Z-Index & Shadows
+- Use z-index tokens: `--z-dropdown` (100), `--z-modal` (200), `--z-popover` (300), `--z-tooltip` (400), `--z-toast` (500)
+- Use shadow tokens: `shadow-subtle`, `shadow-medium`, `shadow-overlay`, `shadow-card`
+
+---
+
+## Component Usage Rules
+
+### Buttons
+| Action type | Variant |
+|-------------|---------|
+| Primary action (create, save) | `primary` |
+| Cancel, close | `default` |
+| Delete, remove | `destructive` |
+| Toolbar/icon-only | `ghost` |
+
+### Delete Confirmations
+Always Modal with: title "Delete {ItemType}", consequence text, `text-[var(--text-error)]` warning, Cancel (default) + Delete (destructive) buttons.
+
+### Toast Notifications
+Use imperative API: `toast.success(msg)`, `toast.error(msg)`. Never build custom notification UI.
+
+### Badges
+Green=success, red=error, amber=warning, blue=info, gray=neutral. Use `dot` prop for status indicators.
+
+### Forms
+Use `FormField` + `Input`/`Textarea` from emcn. Never raw HTML form elements.
+
+### Loading States
+Use `Skeleton` matching the actual UI structure dimensions.
+
+---
+
+## Anti-patterns to flag
+
+- Raw HTML elements instead of emcn components
+- Hardcoded colors instead of CSS variable tokens
+- Custom modal/toast implementations
+- Inline styles
+- Missing `cn()` for conditional classes
+- Wrong button variant for action type
+- Importing from emcn subpaths instead of barrel
+- Using arbitrary z-index instead of tokens
diff --git a/.claude/commands/react-query-best-practices.md b/.claude/commands/react-query-best-practices.md
new file mode 100644
index 0000000000..22bdc320dd
--- /dev/null
+++ b/.claude/commands/react-query-best-practices.md
@@ -0,0 +1,54 @@
+---
+description: Audit React Query usage for best practices — key factories, staleTime, mutations, and server state ownership
+argument-hint: [scope] [fix=true|false]
+---
+
+# React Query Best Practices
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/hooks/queries/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Context
+
+This codebase uses React Query (TanStack Query) as the single source of truth for all server state. All query hooks live in `hooks/queries/`. Zustand is used only for client-only UI state. Server data must never be duplicated into useState or Zustand outside of mutation callbacks that coordinate cross-store state.
+
+## References
+
+Read these before analyzing:
+1. https://tkdodo.eu/blog/practical-react-query — foundational defaults, custom hooks, avoiding local state copies
+2. https://tkdodo.eu/blog/effective-react-query-keys — key factory pattern, hierarchical keys, fuzzy invalidation
+3. https://tkdodo.eu/blog/react-query-as-a-state-manager — React Query IS your server state manager
+
+## Rules to enforce
+
+### Query key factories
+- Every file in `hooks/queries/` must have a hierarchical key factory with an `all` root key
+- Keys must include intermediate plural keys (`lists`, `details`) for prefix invalidation
+- Key factories are colocated with their query hooks, not in a global keys file
+
+### Query hooks
+- Every `queryFn` must forward `signal` for request cancellation
+- Every query must have an explicit `staleTime` (default 0 is almost never correct)
+- `keepPreviousData` / `placeholderData` only on variable-key queries (where params change), never on static keys
+- Use `enabled` to prevent queries from running without required params
+
+### Mutations
+- Use `onSettled` (not `onSuccess`) for cache reconciliation — it fires on both success and error
+- For optimistic updates: save previous data in `onMutate`, roll back in `onError`
+- Use targeted invalidation (`entityKeys.lists()`) not broad (`entityKeys.all`) when possible
+- Don't include mutation objects in `useCallback` deps — `.mutate()` is stable
+
+### Server state ownership
+- Never copy query data into useState. Use query data directly in components.
+- Never copy query data into Zustand stores (exception: mutation callbacks that coordinate cross-store state like temp ID replacement)
+- The query cache is not a local state manager — `setQueryData` is for optimistic updates only
+- Forms are the one deliberate exception: copy server data into local form state with `staleTime: Infinity`
+
+## Steps
+
+1. Read the references above to understand the guidelines
+2. Analyze the specified scope against the rules listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.claude/commands/you-might-not-need-a-callback.md b/.claude/commands/you-might-not-need-a-callback.md
new file mode 100644
index 0000000000..d225102400
--- /dev/null
+++ b/.claude/commands/you-might-not-need-a-callback.md
@@ -0,0 +1,35 @@
+---
+description: Analyze and fix useCallback anti-patterns in your code
+argument-hint: [scope] [fix=true|false]
+---
+
+# You Might Not Need a Callback
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## References
+
+Read before analyzing:
+1. https://react.dev/reference/react/useCallback — official docs on when useCallback is actually needed
+
+## Anti-patterns to detect
+
+1. **useCallback on functions not passed as props or deps**: No benefit if only called within the same component.
+2. **useCallback with deps that change every render**: Memoization is wasted.
+3. **useCallback on handlers passed to native elements**: `<button onClick={fn}>` doesn't benefit from stable references.
+4. **useCallback wrapping functions that return new objects/arrays**: Memoization at the wrong level.
+5. **useCallback with empty deps when deps are needed**: Stale closures.
+6. **Pairing useCallback + React.memo unnecessarily**: Only optimize when you've measured a problem.
+7. **useCallback in hooks that don't need stable references**: Not every hook return needs memoization.
+
+Note: This codebase uses a ref pattern for stable callbacks (`useRef` + empty deps). That pattern is correct — don't flag it.
+
+## Steps
+
+1. Read the reference above
+2. Analyze the specified scope for the anti-patterns listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.claude/commands/you-might-not-need-a-memo.md b/.claude/commands/you-might-not-need-a-memo.md
new file mode 100644
index 0000000000..f0c5b3124a
--- /dev/null
+++ b/.claude/commands/you-might-not-need-a-memo.md
@@ -0,0 +1,33 @@
+---
+description: Analyze and fix useMemo/React.memo anti-patterns in your code
+argument-hint: [scope] [fix=true|false]
+---
+
+# You Might Not Need a Memo
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## References
+
+Read before analyzing:
+1. https://overreacted.io/before-you-memo/ — two techniques to avoid memo entirely
+
+## Anti-patterns to detect
+
+1. **State can be moved down instead of memoizing**: Move state into a smaller child so the slow component stops re-rendering without memo.
+2. **Children can be lifted up**: Extract stateful part, pass expensive subtree as `children` — children as props don't re-render when parent state changes.
+3. **useMemo on cheap computations**: Small array filters, string concat, arithmetic don't need memoization.
+4. **useMemo with constantly-changing deps**: Deps change every render = useMemo does nothing.
+5. **useMemo to stabilize props for non-memoized children**: If the child isn't wrapped in React.memo, stable references don't matter.
+6. **React.memo on components that always receive new props**: Fix the parent instead.
+7. **useMemo for derived state**: Just compute inline during render.
+
+## Steps
+
+1. Read the reference above
+2. Analyze the specified scope for the anti-patterns listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.claude/commands/you-might-not-need-state.md b/.claude/commands/you-might-not-need-state.md
new file mode 100644
index 0000000000..2e539146f6
--- /dev/null
+++ b/.claude/commands/you-might-not-need-state.md
@@ -0,0 +1,38 @@
+---
+description: Analyze and fix unnecessary useState, derived state, and server-state-in-local-state anti-patterns
+argument-hint: [scope] [fix=true|false]
+---
+
+# You Might Not Need State
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Context
+
+This codebase uses React Query for all server state and Zustand for client-only global state. useState should only be used for ephemeral UI concerns (open/closed, hover, local form input). Server data should never be copied into useState or Zustand — React Query is the single source of truth.
+
+## References
+
+Read these before analyzing:
+1. https://react.dev/learn/choosing-the-state-structure — 5 principles for structuring state
+2. https://tkdodo.eu/blog/dont-over-use-state — never store derived/computed values in state
+3. https://tkdodo.eu/blog/putting-props-to-use-state — never mirror props into state via useEffect
+
+## Anti-patterns to detect
+
+1. **Derived state stored in useState**: If a value can be computed from props, other state, or query data, compute it inline during render instead of storing it in state.
+2. **Server state copied into useState**: Never `useState` + `useEffect` to sync React Query data into local state. Use query data directly. The only exception is forms where users edit server data.
+3. **Props mirrored into state**: Never `useState(prop)` + `useEffect(() => setState(prop))`. Use the prop directly, or use a key to reset component state.
+4. **Chained useEffect state updates**: Never chain Effects that set state to trigger other Effects. Calculate all derived values in the event handler or inline during render.
+5. **Storing objects when an ID suffices**: Store `selectedId` not a copy of the selected object. Derive the object: `items.find(i => i.id === selectedId)`.
+6. **State that duplicates Zustand or React Query**: If the data already lives in a store or query cache, don't create a parallel useState.
+
+## Steps
+
+1. Read the references above to understand the guidelines
+2. Analyze the specified scope for the anti-patterns listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.cursor/commands/cleanup.md b/.cursor/commands/cleanup.md
new file mode 100644
index 0000000000..b4e24b718a
--- /dev/null
+++ b/.cursor/commands/cleanup.md
@@ -0,0 +1,20 @@
+# Cleanup
+
+Arguments:
+- scope: what to review (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Steps
+
+Run each of these skills in order on the specified scope, passing through the scope and fix arguments. After each skill completes, move to the next. Do not skip any.
+
+1. `/you-might-not-need-an-effect $ARGUMENTS`
+2. `/you-might-not-need-a-memo $ARGUMENTS`
+3. `/you-might-not-need-a-callback $ARGUMENTS`
+4. `/you-might-not-need-state $ARGUMENTS`
+5. `/react-query-best-practices $ARGUMENTS`
+6. `/emcn-design-review $ARGUMENTS`
+
+After all skills have run, output a summary of what was found and fixed (or proposed) across all six passes.
diff --git a/.cursor/commands/emcn-design-review.md b/.cursor/commands/emcn-design-review.md
new file mode 100644
index 0000000000..8887ecf42d
--- /dev/null
+++ b/.cursor/commands/emcn-design-review.md
@@ -0,0 +1,95 @@
+# EMCN Design Review
+
+Arguments:
+- scope: what to review (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Context
+
+This codebase uses **emcn**, a custom component library built on Radix UI primitives with CVA (class-variance-authority) variants and CSS variable design tokens. All UI must use emcn components and tokens — never raw HTML elements or hardcoded colors.
+
+## Steps
+
+1. Read the emcn barrel export at `apps/sim/components/emcn/components/index.ts` to know what's available
+2. Read `apps/sim/app/_styles/globals.css` for the full set of CSS variable tokens
+3. Analyze the specified scope against every rule below
+4. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
+
+---
+
+## Imports
+
+- Import components from `@/components/emcn`, never from subpaths
+- Import icons from `@/components/emcn/icons` or `lucide-react`
+- Import `cn` from `@/lib/core/utils/cn` for conditional class merging
+- Import app-specific wrappers (Select, VerifiedBadge) from `@/components/ui`
+
+---
+
+## Design Tokens (CSS Variables)
+
+Never use raw color values. Always use CSS variable tokens via Tailwind arbitrary values.
+
+### Text hierarchy
+- `text-[var(--text-primary)]` — Main content text
+- `text-[var(--text-secondary)]` — Secondary/supporting text
+- `text-[var(--text-tertiary)]` — Tertiary text
+- `text-[var(--text-muted)]` — Disabled, placeholder text
+- `text-[var(--text-icon)]` — Icon tinting
+- `text-[var(--text-error)]` — Error/warning messages
+
+### Surfaces
+- `bg-[var(--bg)]` — Page background
+- `bg-[var(--surface-2)]` through `bg-[var(--surface-7)]` — Increasing elevation
+- `bg-[var(--surface-hover)]` — Hover backgrounds
+- `bg-[var(--surface-active)]` — Active/selected backgrounds
+
+### Borders
+- `border-[var(--border)]` — Default borders
+- `border-[var(--border-1)]` — Stronger borders (inputs, cards)
+
+### Z-Index & Shadows
+- Use z-index tokens: `--z-dropdown` (100), `--z-modal` (200), `--z-popover` (300), `--z-tooltip` (400), `--z-toast` (500)
+- Use shadow tokens: `shadow-subtle`, `shadow-medium`, `shadow-overlay`, `shadow-card`
+
+---
+
+## Component Usage Rules
+
+### Buttons
+| Action type | Variant |
+|-------------|---------|
+| Primary action (create, save) | `primary` |
+| Cancel, close | `default` |
+| Delete, remove | `destructive` |
+| Toolbar/icon-only | `ghost` |
+
+### Delete Confirmations
+Always Modal with: title "Delete {ItemType}", consequence text, `text-[var(--text-error)]` warning, Cancel (default) + Delete (destructive) buttons.
+
+### Toast Notifications
+Use imperative API: `toast.success(msg)`, `toast.error(msg)`. Never build custom notification UI.
+
+### Badges
+Green=success, red=error, amber=warning, blue=info, gray=neutral. Use `dot` prop for status indicators.
+
+### Forms
+Use `FormField` + `Input`/`Textarea` from emcn. Never raw HTML form elements.
+
+### Loading States
+Use `Skeleton` matching the actual UI structure dimensions.
+
+---
+
+## Anti-patterns to flag
+
+- Raw HTML elements instead of emcn components
+- Hardcoded colors instead of CSS variable tokens
+- Custom modal/toast implementations
+- Inline styles
+- Missing `cn()` for conditional classes
+- Wrong button variant for action type
+- Importing from emcn subpaths instead of barrel
+- Using arbitrary z-index instead of tokens
diff --git a/.cursor/commands/react-query-best-practices.md b/.cursor/commands/react-query-best-practices.md
new file mode 100644
index 0000000000..6aced33b7b
--- /dev/null
+++ b/.cursor/commands/react-query-best-practices.md
@@ -0,0 +1,49 @@
+# React Query Best Practices
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/hooks/queries/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Context
+
+This codebase uses React Query (TanStack Query) as the single source of truth for all server state. All query hooks live in `hooks/queries/`. Zustand is used only for client-only UI state. Server data must never be duplicated into useState or Zustand outside of mutation callbacks that coordinate cross-store state.
+
+## References
+
+Read these before analyzing:
+1. https://tkdodo.eu/blog/practical-react-query — foundational defaults, custom hooks, avoiding local state copies
+2. https://tkdodo.eu/blog/effective-react-query-keys — key factory pattern, hierarchical keys, fuzzy invalidation
+3. https://tkdodo.eu/blog/react-query-as-a-state-manager — React Query IS your server state manager
+
+## Rules to enforce
+
+### Query key factories
+- Every file in `hooks/queries/` must have a hierarchical key factory with an `all` root key
+- Keys must include intermediate plural keys (`lists`, `details`) for prefix invalidation
+- Key factories are colocated with their query hooks, not in a global keys file
+
+### Query hooks
+- Every `queryFn` must forward `signal` for request cancellation
+- Every query must have an explicit `staleTime` (default 0 is almost never correct)
+- `keepPreviousData` / `placeholderData` only on variable-key queries (where params change), never on static keys
+- Use `enabled` to prevent queries from running without required params
+
+### Mutations
+- Use `onSettled` (not `onSuccess`) for cache reconciliation — it fires on both success and error
+- For optimistic updates: save previous data in `onMutate`, roll back in `onError`
+- Use targeted invalidation (`entityKeys.lists()`) not broad (`entityKeys.all`) when possible
+- Don't include mutation objects in `useCallback` deps — `.mutate()` is stable
+
+### Server state ownership
+- Never copy query data into useState. Use query data directly in components.
+- Never copy query data into Zustand stores (exception: mutation callbacks that coordinate cross-store state like temp ID replacement)
+- The query cache is not a local state manager — `setQueryData` is for optimistic updates only
+- Forms are the one deliberate exception: copy server data into local form state with `staleTime: Infinity`
+
+## Steps
+
+1. Read the references above to understand the guidelines
+2. Analyze the specified scope against the rules listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.cursor/commands/you-might-not-need-a-callback.md b/.cursor/commands/you-might-not-need-a-callback.md
new file mode 100644
index 0000000000..d2d5fa66da
--- /dev/null
+++ b/.cursor/commands/you-might-not-need-a-callback.md
@@ -0,0 +1,30 @@
+# You Might Not Need a Callback
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## References
+
+Read before analyzing:
+1. https://react.dev/reference/react/useCallback — official docs on when useCallback is actually needed
+
+## Anti-patterns to detect
+
+1. **useCallback on functions not passed as props or deps**: No benefit if only called within the same component.
+2. **useCallback with deps that change every render**: Memoization is wasted.
+3. **useCallback on handlers passed to native elements**: `<button onClick={fn}>` doesn't benefit from stable references.
+4. **useCallback wrapping functions that return new objects/arrays**: Memoization at the wrong level.
+5. **useCallback with empty deps when deps are needed**: Stale closures.
+6. **Pairing useCallback + React.memo unnecessarily**: Only optimize when you've measured a problem.
+7. **useCallback in hooks that don't need stable references**: Not every hook return needs memoization.
+
+Note: This codebase uses a ref pattern for stable callbacks (`useRef` + empty deps). That pattern is correct — don't flag it.
+
+## Steps
+
+1. Read the reference above
+2. Analyze the specified scope for the anti-patterns listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.cursor/commands/you-might-not-need-a-memo.md b/.cursor/commands/you-might-not-need-a-memo.md
new file mode 100644
index 0000000000..e83d802db5
--- /dev/null
+++ b/.cursor/commands/you-might-not-need-a-memo.md
@@ -0,0 +1,28 @@
+# You Might Not Need a Memo
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## References
+
+Read before analyzing:
+1. https://overreacted.io/before-you-memo/ — two techniques to avoid memo entirely
+
+## Anti-patterns to detect
+
+1. **State can be moved down instead of memoizing**: Move state into a smaller child so the slow component stops re-rendering without memo.
+2. **Children can be lifted up**: Extract stateful part, pass expensive subtree as `children` — children as props don't re-render when parent state changes.
+3. **useMemo on cheap computations**: Small array filters, string concat, arithmetic don't need memoization.
+4. **useMemo with constantly-changing deps**: Deps change every render = useMemo does nothing.
+5. **useMemo to stabilize props for non-memoized children**: If the child isn't wrapped in React.memo, stable references don't matter.
+6. **React.memo on components that always receive new props**: Fix the parent instead.
+7. **useMemo for derived state**: Just compute inline during render.
+
+## Steps
+
+1. Read the reference above
+2. Analyze the specified scope for the anti-patterns listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
diff --git a/.cursor/commands/you-might-not-need-state.md b/.cursor/commands/you-might-not-need-state.md
new file mode 100644
index 0000000000..1cc1430d44
--- /dev/null
+++ b/.cursor/commands/you-might-not-need-state.md
@@ -0,0 +1,33 @@
+# You Might Not Need State
+
+Arguments:
+- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
+- fix: whether to apply fixes (default: true). Set to false to only propose changes.
+
+User arguments: $ARGUMENTS
+
+## Context
+
+This codebase uses React Query for all server state and Zustand for client-only global state. useState should only be used for ephemeral UI concerns (open/closed, hover, local form input). Server data should never be copied into useState or Zustand — React Query is the single source of truth.
+
+## References
+
+Read these before analyzing:
+1. https://react.dev/learn/choosing-the-state-structure — 5 principles for structuring state
+2. https://tkdodo.eu/blog/dont-over-use-state — never store derived/computed values in state
+3. https://tkdodo.eu/blog/putting-props-to-use-state — never mirror props into state via useEffect
+
+## Anti-patterns to detect
+
+1. **Derived state stored in useState**: If a value can be computed from props, other state, or query data, compute it inline during render instead of storing it in state.
+2. **Server state copied into useState**: Never `useState` + `useEffect` to sync React Query data into local state. Use query data directly. The only exception is forms where users edit server data.
+3. **Props mirrored into state**: Never `useState(prop)` + `useEffect(() => setState(prop))`. Use the prop directly, or use a key to reset component state.
+4. **Chained useEffect state updates**: Never chain Effects that set state to trigger other Effects. Calculate all derived values in the event handler or inline during render.
+5. **Storing objects when an ID suffices**: Store `selectedId` not a copy of the selected object. Derive the object: `items.find(i => i.id === selectedId)`.
+6. **State that duplicates Zustand or React Query**: If the data already lives in a store or query cache, don't create a parallel useState.
+
+## Steps
+
+1. Read the references above to understand the guidelines
+2. Analyze the specified scope for the anti-patterns listed above
+3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.

From cd31f9cfe06725c0537c8383d06c3384f889363c Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 13 Apr 2026 11:28:21 -0700
Subject: [PATCH 2/2] chore(skills): fix emcn design review with verified
 codebase patterns

---
 .agents/skills/emcn-design-review/SKILL.md | 122 ++++++++++++---------
 .claude/commands/emcn-design-review.md     |  93 ++++++----------
 .cursor/commands/emcn-design-review.md     |  93 ++++++----------
 3 files changed, 143 insertions(+), 165 deletions(-)

diff --git a/.agents/skills/emcn-design-review/SKILL.md b/.agents/skills/emcn-design-review/SKILL.md
index 2c5246ce27..415a85046d 100644
--- a/.agents/skills/emcn-design-review/SKILL.md
+++ b/.agents/skills/emcn-design-review/SKILL.md
@@ -42,7 +42,7 @@ import { Button } from '@/components/emcn/components/button/button'
 
 ## Design Tokens (CSS Variables)
 
-Never use raw color values. Always use CSS variable tokens via Tailwind arbitrary values.
+Never use raw color values. Always use CSS variable tokens via Tailwind arbitrary values: `text-[var(--text-primary)]`, not `text-gray-500` or `#333`. The CSS variable pattern is canonical (1,700+ uses) — do not use Tailwind semantic classes like `text-muted-foreground`.
 
 ### Text hierarchy
 | Token | Use |
@@ -99,16 +99,18 @@ Use z-index tokens for layering:
 ### Buttons
 Available variants: `default`, `primary`, `destructive`, `ghost`, `outline`, `active`, `secondary`, `tertiary`, `subtle`, `ghost-secondary`, `3d`
 
-| Action type | Variant |
-|-------------|---------|
-| Primary action (create, save, submit) | `primary` |
-| Cancel, close, secondary action | `default` |
-| Delete, remove, destructive action | `destructive` |
-| Toolbar/icon-only button | `ghost` |
-| Toggle, mode switch | `ghost` or `outline` |
-| Active/selected state | `active` |
+| Action type | Variant | Frequency |
+|-------------|---------|-----------|
+| Toolbar, icon-only, utility actions | `ghost` | Most common (28%) |
+| Primary action (create, save, submit) | `primary` | Very common (24%) |
+| Cancel, close, secondary action | `default` | Common |
+| Delete, remove, destructive action | `destructive` | Targeted use only |
+| Active/selected state | `active` | Targeted use only |
+| Toggle, mode switch | `outline` | Moderate |
 
-Sizes: `sm` (compact) or `md` (default). Never create custom button styles — use an existing variant.
+Sizes: `sm` (compact, 32% of buttons) or `md` (default, used when no size specified). Never create custom button styles — use an existing variant.
+
+Buttons without an explicit variant prop get `default` styling. This is acceptable for cancel/secondary actions.
 
 ### Modals (Dialogs)
 Use `Modal` + subcomponents. Never build custom dialog overlays.
@@ -126,12 +128,12 @@ Use `Modal` + subcomponents. Never build custom dialog overlays.
 </Modal>
 ```
 
-Modal sizes: `sm` (440px, confirmations), `md` (500px, forms), `lg` (600px, content-heavy), `xl` (800px, complex editors), `full` (1200px, dashboards).
+Modal sizes by frequency: `sm` (440px, most common — confirmations and simple dialogs), `md` (500px, forms), `lg` (600px, content-heavy), `xl` (800px, rare), `full` (1200px, rare).
 
-Footer buttons: Cancel on left, primary action on right.
+Footer buttons: Cancel on left (`variant="default"`), primary action on right. This pattern is followed 100% across the codebase.
 
-### Delete Confirmations
-Always use Modal with this pattern:
+### Delete/Remove Confirmations
+Always use Modal with `size="sm"`. The established pattern:
 
 ```tsx
 <Modal open={open} onOpenChange={setOpen}>
@@ -140,7 +142,6 @@ Always use Modal with this pattern:
     <ModalBody>
       <p>Description of consequences</p>
       <p className="text-[var(--text-error)]">Warning about irreversibility</p>
-      {/* Optional: confirmation text input for high-risk actions */}
     </ModalBody>
     <ModalFooter>
       <Button variant="default" onClick={() => setOpen(false)}>Cancel</Button>
@@ -153,15 +154,17 @@ Always use Modal with this pattern:
 ```
 
 Rules:
-- Title: "Delete {ItemType}"
+- Title: "Delete {ItemType}" or "Remove {ItemType}" (use "Remove" for membership/association changes)
 - Include consequence description
-- Use `text-[var(--text-error)]` for warning text
-- Destructive button on the right
+- Use `text-[var(--text-error)]` for warning text when the action is irreversible
+- `variant="destructive"` for the action button (100% compliance)
+- `variant="default"` for cancel (100% compliance)
+- Cancel left, destructive right (100% compliance)
 - For high-risk deletes (workspaces), require typing the name to confirm
 - Include recovery info if soft-delete: "You can restore it from Recently Deleted in Settings"
 
 ### Toast Notifications
-Use the imperative `toast` API. Never build custom notification UI.
+Use the imperative `toast` API from `@/components/emcn`. Never build custom notification UI.
 
 ```tsx
 import { toast } from '@/components/emcn'
@@ -171,21 +174,26 @@ toast.error('Something went wrong')
 toast.success('Deleted', { action: { label: 'Undo', onClick: handleUndo } })
 ```
 
-Variants: `default`, `success`, `error`. Auto-dismiss after 5s.
+Variants: `default`, `success`, `error`. Auto-dismiss after 5s. Supports optional action buttons with callbacks.
 
 ### Badges
 Use semantic color variants for status:
 
-| Status | Variant |
-|--------|---------|
-| Success, active, online | `green` |
-| Error, failed, offline | `red` |
-| Warning, processing | `amber` or `orange` |
-| Info, default | `blue` |
-| Neutral, draft, inactive | `gray` |
-| Type labels | `type` |
-
-Use `dot` prop for status indicators. Use `icon` prop for icon badges.
+| Status | Variant | Usage |
+|--------|---------|-------|
+| Error, failed, disconnected | `red` | Most common (15 uses) |
+| Metadata, roles, auth types, scopes | `gray-secondary` | Very common (12 uses) |
+| Type annotations (TS types, field types) | `type` | Very common (12 uses) |
+| Success, active, enabled, running | `green` | Common (7 uses) |
+| Neutral, default, unknown | `gray` | Common (6 uses) |
+| Outline, parameters, public | `outline` | Moderate (6 uses) |
+| Warning, processing | `amber` | Moderate (5 uses) |
+| Paused, warning | `orange` | Occasional |
+| Info, queued | `blue` | Occasional |
+| Data types (arrays) | `purple` | Occasional |
+| Generic with border | `default` | Occasional |
+
+Use `dot` prop for status indicators (19 instances in codebase). `icon` prop is available but rarely used.
 
 ### Tooltips
 Use `Tooltip` from emcn with namespace pattern:
@@ -226,7 +234,7 @@ Use for context menus and action menus:
 <DropdownMenu>
   <DropdownMenuTrigger asChild>
     <Button variant="ghost">
-      <MoreHorizontal className="h-4 w-4" />
+      <MoreHorizontal className="h-[14px] w-[14px]" />
     </Button>
   </DropdownMenuTrigger>
   <DropdownMenuContent align="end">
@@ -251,7 +259,7 @@ Use `FormField` wrapper for labeled inputs:
 ```
 
 Rules:
-- Use `Input` from emcn, never raw `<input>`
+- Use `Input` from emcn, never raw `<input>` (exception: hidden file inputs)
 - Use `Textarea` from emcn, never raw `<textarea>`
 - Use `FormField` for label + input + error layout
 - Mark optional fields with `optional` prop
@@ -273,43 +281,55 @@ Rules:
 - Stack multiple skeletons for lists
 
 ### Icons
-Standard sizing pattern:
+Standard sizing — `h-[14px] w-[14px]` is the dominant pattern (400+ uses):
 
 ```tsx
 <Icon className="h-[14px] w-[14px] text-[var(--text-icon)]" />
 ```
 
-Common sizes: `h-3 w-3` (12px), `h-[14px] w-[14px]`, `h-4 w-4` (16px).
+Size scale by frequency:
+1. `h-[14px] w-[14px]` — default for inline icons (most common)
+2. `h-[16px] w-[16px]` — slightly larger inline icons
+3. `h-3 w-3` (12px) — compact/tight spaces
+4. `h-4 w-4` (16px) — Tailwind equivalent, also common
+5. `h-3.5 w-3.5` (14px) — Tailwind equivalent of 14px
+6. `h-5 w-5` (20px) — larger icons, section headers
+
+Use `text-[var(--text-icon)]` for icon color (113+ uses in codebase).
 
 ---
 
 ## Styling Rules
 
-1. **Use `cn()` for conditional classes**: `cn('base', condition && 'conditional')`
-2. **Never use inline styles**: Use Tailwind classes exclusively
-3. **Never hardcode colors**: Use CSS variable tokens (`var(--text-primary)`, not `#333`)
-4. **Never use global styles**: Keep all styling local to components
-5. **Hover states**: Use `hover-hover:` pseudo-class for hover-capable devices
-6. **Transitions**: Use `transition-colors` for color changes, `transition-colors duration-100` for fast hover
-7. **Border radius**: `rounded-lg` (large cards), `rounded-md` (medium), `rounded-sm` (small), `rounded-xs` (tiny)
-8. **Typography**: Use semantic sizes — `text-small` (13px), `text-caption` (12px), `text-xs` (11px), `text-micro` (10px)
-9. **Font weight**: Use `font-medium` for emphasis, avoid `font-bold` unless for headings
-10. **Spacing**: Use Tailwind gap/padding utilities. Common patterns: `gap-2`, `gap-3`, `px-4 py-2.5`
+1. **Use `cn()` for conditional classes**: `cn('base', condition && 'conditional')` — never template literal concatenation like `` `base ${condition ? 'active' : ''}` ``
+2. **Inline styles**: Avoid. Exception: dynamic values that can't be expressed as Tailwind classes (e.g., `style={{ width: dynamicVar }}` or CSS variable references). Never use inline styles for colors or static values.
+3. **Never hardcode colors**: Use CSS variable tokens. Never `text-gray-500`, `bg-red-100`, `#fff`, or `rgb()`. Always `text-[var(--text-*)]`, `bg-[var(--surface-*)]`, etc.
+4. **Never use Tailwind semantic color classes**: Use `text-[var(--text-muted)]` not `text-muted-foreground`. The CSS variable pattern is canonical.
+5. **Never use global styles**: Keep all styling local to components
+6. **Hover states**: Use `hover-hover:` pseudo-class for hover-capable devices
+7. **Transitions**: Use `transition-colors` for color changes, `transition-colors duration-100` for fast hover
+8. **Border radius**: `rounded-lg` (large cards), `rounded-md` (medium), `rounded-sm` (small), `rounded-xs` (tiny)
+9. **Typography**: Use semantic sizes — `text-small` (13px), `text-caption` (12px), `text-xs` (11px), `text-micro` (10px)
+10. **Font weight**: Use `font-medium` for emphasis, avoid `font-bold` unless for headings
+11. **Spacing**: Use Tailwind gap/padding utilities. Common patterns: `gap-2`, `gap-3`, `px-4 py-2.5`
 
 ---
 
 ## Anti-patterns to flag
 
-- Raw HTML elements (`<button>`, `<input>`, `<dialog>`) instead of emcn components
-- Hardcoded color values (`#fff`, `rgb(0,0,0)`, `text-gray-500`)
+- Raw HTML `<button>` instead of Button component (exception: inside Radix primitives)
+- Raw HTML `<input>` instead of Input component (exception: hidden file inputs, read-only checkboxes in markdown)
+- Hardcoded Tailwind default colors (`text-gray-*`, `bg-red-*`, `text-blue-*`)
+- Hex values in className (`bg-[#fff]`, `text-[#333]`)
+- Tailwind semantic classes (`text-muted-foreground`) instead of CSS variables (`text-[var(--text-muted)]`)
 - Custom modal/dialog implementations instead of `Modal`
 - Custom toast/notification implementations instead of `toast`
-- Inline styles (`style={{ color: 'red' }}`)
-- Missing `cn()` for conditional classes (string concatenation instead)
+- Inline styles for colors or static values (dynamic values are acceptable)
+- Template literal className concatenation instead of `cn()`
 - Wrong button variant for the action type
 - Missing loading/skeleton states
 - Missing error states on forms
-- Using `@/components/ui/button` when `@/components/emcn` Button should be used
-- Importing from emcn subpaths instead of barrel
-- Using `z-50`, `z-[9999]` instead of z-index tokens
+- Importing from emcn subpaths instead of barrel export
+- Using arbitrary z-index (`z-50`, `z-[9999]`) instead of z-index tokens
 - Custom shadows instead of shadow tokens
+- Icon sizes that don't follow the established scale (default to `h-[14px] w-[14px]`)
diff --git a/.claude/commands/emcn-design-review.md b/.claude/commands/emcn-design-review.md
index b24dde82cf..ecfad5bcc2 100644
--- a/.claude/commands/emcn-design-review.md
+++ b/.claude/commands/emcn-design-review.md
@@ -13,12 +13,12 @@ User arguments: $ARGUMENTS
 
 ## Context
 
-This codebase uses **emcn**, a custom component library built on Radix UI primitives with CVA (class-variance-authority) variants and CSS variable design tokens. All UI must use emcn components and tokens — never raw HTML elements or hardcoded colors.
+This codebase uses **emcn**, a custom component library built on Radix UI primitives with CVA variants and CSS variable design tokens. All UI must use emcn components and tokens.
 
 ## Steps
 
 1. Read the emcn barrel export at `apps/sim/components/emcn/components/index.ts` to know what's available
-2. Read `apps/sim/app/_styles/globals.css` for the full set of CSS variable tokens
+2. Read `apps/sim/app/_styles/globals.css` for CSS variable tokens
 3. Analyze the specified scope against every rule below
 4. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
 
@@ -26,75 +26,54 @@ This codebase uses **emcn**, a custom component library built on Radix UI primit
 
 ## Imports
 
-- Import components from `@/components/emcn`, never from subpaths
-- Import icons from `@/components/emcn/icons` or `lucide-react`
-- Import `cn` from `@/lib/core/utils/cn` for conditional class merging
-- Import app-specific wrappers (Select, VerifiedBadge) from `@/components/ui`
+- Import from `@/components/emcn` barrel, never subpaths
+- Icons from `@/components/emcn/icons` or `lucide-react`
+- Use `cn` from `@/lib/core/utils/cn` for conditional classes
 
----
-
-## Design Tokens (CSS Variables)
-
-Never use raw color values. Always use CSS variable tokens via Tailwind arbitrary values.
-
-### Text hierarchy
-- `text-[var(--text-primary)]` — Main content text
-- `text-[var(--text-secondary)]` — Secondary/supporting text
-- `text-[var(--text-tertiary)]` — Tertiary text
-- `text-[var(--text-muted)]` — Disabled, placeholder text
-- `text-[var(--text-icon)]` — Icon tinting
-- `text-[var(--text-error)]` — Error/warning messages
-
-### Surfaces
-- `bg-[var(--bg)]` — Page background
-- `bg-[var(--surface-2)]` through `bg-[var(--surface-7)]` — Increasing elevation
-- `bg-[var(--surface-hover)]` — Hover backgrounds
-- `bg-[var(--surface-active)]` — Active/selected backgrounds
-
-### Borders
-- `border-[var(--border)]` — Default borders
-- `border-[var(--border-1)]` — Stronger borders (inputs, cards)
+## Design Tokens
 
-### Z-Index & Shadows
-- Use z-index tokens: `--z-dropdown` (100), `--z-modal` (200), `--z-popover` (300), `--z-tooltip` (400), `--z-toast` (500)
-- Use shadow tokens: `shadow-subtle`, `shadow-medium`, `shadow-overlay`, `shadow-card`
+Use CSS variable pattern (`text-[var(--text-primary)]`), never Tailwind semantics (`text-muted-foreground`) or hardcoded colors (`text-gray-500`, `#333`).
 
----
+**Text**: `--text-primary`, `--text-secondary`, `--text-tertiary`, `--text-muted`, `--text-icon`, `--text-inverse`, `--text-error`
+**Surfaces**: `--bg`, `--surface-2` through `--surface-7`, `--surface-hover`, `--surface-active`
+**Borders**: `--border`, `--border-1`, `--border-muted`
+**Z-Index**: `--z-dropdown` (100), `--z-modal` (200), `--z-popover` (300), `--z-tooltip` (400), `--z-toast` (500)
+**Shadows**: `shadow-subtle`, `shadow-medium`, `shadow-overlay`, `shadow-card`
 
-## Component Usage Rules
+## Buttons
 
-### Buttons
-| Action type | Variant |
-|-------------|---------|
-| Primary action (create, save) | `primary` |
+| Action | Variant |
+|--------|---------|
+| Toolbar, icon-only | `ghost` (most common, 28%) |
+| Create, save, submit | `primary` (24%) |
 | Cancel, close | `default` |
 | Delete, remove | `destructive` |
-| Toolbar/icon-only | `ghost` |
+| Selected state | `active` |
+| Toggle | `outline` |
 
-### Delete Confirmations
-Always Modal with: title "Delete {ItemType}", consequence text, `text-[var(--text-error)]` warning, Cancel (default) + Delete (destructive) buttons.
+## Delete/Remove Confirmations
 
-### Toast Notifications
-Use imperative API: `toast.success(msg)`, `toast.error(msg)`. Never build custom notification UI.
+Modal `size="sm"`, title "Delete/Remove {ItemType}", `variant="destructive"` action button, `variant="default"` cancel. Cancel left, action right (100% compliance). Use `text-[var(--text-error)]` for irreversible warnings.
 
-### Badges
-Green=success, red=error, amber=warning, blue=info, gray=neutral. Use `dot` prop for status indicators.
+## Toast
 
-### Forms
-Use `FormField` + `Input`/`Textarea` from emcn. Never raw HTML form elements.
+`toast.success()`, `toast.error()`, `toast()` from `@/components/emcn`. Never custom notification UI.
 
-### Loading States
-Use `Skeleton` matching the actual UI structure dimensions.
+## Badges
 
----
+`red`=error/failed, `gray-secondary`=metadata/roles, `type`=type annotations, `green`=success/active, `gray`=neutral, `amber`=processing, `orange`=paused, `blue`=info. Use `dot` prop for status indicators.
+
+## Icons
+
+Default: `h-[14px] w-[14px]` (400+ uses). Color: `text-[var(--text-icon)]`. Scale: 14px > 16px > 12px > 20px.
 
 ## Anti-patterns to flag
 
-- Raw HTML elements instead of emcn components
-- Hardcoded colors instead of CSS variable tokens
-- Custom modal/toast implementations
-- Inline styles
-- Missing `cn()` for conditional classes
-- Wrong button variant for action type
+- Raw `<button>`/`<input>` instead of emcn components
+- Hardcoded colors (`text-gray-*`, `#hex`, `rgb()`)
+- Tailwind semantics (`text-muted-foreground`) instead of CSS variables
+- Template literal className instead of `cn()`
+- Inline styles for colors/static values (dynamic values OK)
 - Importing from emcn subpaths instead of barrel
-- Using arbitrary z-index instead of tokens
+- Arbitrary z-index instead of tokens
+- Wrong button variant for action type
diff --git a/.cursor/commands/emcn-design-review.md b/.cursor/commands/emcn-design-review.md
index 8887ecf42d..a68e96eb9b 100644
--- a/.cursor/commands/emcn-design-review.md
+++ b/.cursor/commands/emcn-design-review.md
@@ -8,12 +8,12 @@ User arguments: $ARGUMENTS
 
 ## Context
 
-This codebase uses **emcn**, a custom component library built on Radix UI primitives with CVA (class-variance-authority) variants and CSS variable design tokens. All UI must use emcn components and tokens — never raw HTML elements or hardcoded colors.
+This codebase uses **emcn**, a custom component library built on Radix UI primitives with CVA variants and CSS variable design tokens. All UI must use emcn components and tokens.
 
 ## Steps
 
 1. Read the emcn barrel export at `apps/sim/components/emcn/components/index.ts` to know what's available
-2. Read `apps/sim/app/_styles/globals.css` for the full set of CSS variable tokens
+2. Read `apps/sim/app/_styles/globals.css` for CSS variable tokens
 3. Analyze the specified scope against every rule below
 4. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
 
@@ -21,75 +21,54 @@ This codebase uses **emcn**, a custom component library built on Radix UI primit
 
 ## Imports
 
-- Import components from `@/components/emcn`, never from subpaths
-- Import icons from `@/components/emcn/icons` or `lucide-react`
-- Import `cn` from `@/lib/core/utils/cn` for conditional class merging
-- Import app-specific wrappers (Select, VerifiedBadge) from `@/components/ui`
+- Import from `@/components/emcn` barrel, never subpaths
+- Icons from `@/components/emcn/icons` or `lucide-react`
+- Use `cn` from `@/lib/core/utils/cn` for conditional classes
 
----
-
-## Design Tokens (CSS Variables)
-
-Never use raw color values. Always use CSS variable tokens via Tailwind arbitrary values.
-
-### Text hierarchy
-- `text-[var(--text-primary)]` — Main content text
-- `text-[var(--text-secondary)]` — Secondary/supporting text
-- `text-[var(--text-tertiary)]` — Tertiary text
-- `text-[var(--text-muted)]` — Disabled, placeholder text
-- `text-[var(--text-icon)]` — Icon tinting
-- `text-[var(--text-error)]` — Error/warning messages
-
-### Surfaces
-- `bg-[var(--bg)]` — Page background
-- `bg-[var(--surface-2)]` through `bg-[var(--surface-7)]` — Increasing elevation
-- `bg-[var(--surface-hover)]` — Hover backgrounds
-- `bg-[var(--surface-active)]` — Active/selected backgrounds
-
-### Borders
-- `border-[var(--border)]` — Default borders
-- `border-[var(--border-1)]` — Stronger borders (inputs, cards)
+## Design Tokens
 
-### Z-Index & Shadows
-- Use z-index tokens: `--z-dropdown` (100), `--z-modal` (200), `--z-popover` (300), `--z-tooltip` (400), `--z-toast` (500)
-- Use shadow tokens: `shadow-subtle`, `shadow-medium`, `shadow-overlay`, `shadow-card`
+Use CSS variable pattern (`text-[var(--text-primary)]`), never Tailwind semantics (`text-muted-foreground`) or hardcoded colors (`text-gray-500`, `#333`).
 
----
+**Text**: `--text-primary`, `--text-secondary`, `--text-tertiary`, `--text-muted`, `--text-icon`, `--text-inverse`, `--text-error`
+**Surfaces**: `--bg`, `--surface-2` through `--surface-7`, `--surface-hover`, `--surface-active`
+**Borders**: `--border`, `--border-1`, `--border-muted`
+**Z-Index**: `--z-dropdown` (100), `--z-modal` (200), `--z-popover` (300), `--z-tooltip` (400), `--z-toast` (500)
+**Shadows**: `shadow-subtle`, `shadow-medium`, `shadow-overlay`, `shadow-card`
 
-## Component Usage Rules
+## Buttons
 
-### Buttons
-| Action type | Variant |
-|-------------|---------|
-| Primary action (create, save) | `primary` |
+| Action | Variant |
+|--------|---------|
+| Toolbar, icon-only | `ghost` (most common, 28%) |
+| Create, save, submit | `primary` (24%) |
 | Cancel, close | `default` |
 | Delete, remove | `destructive` |
-| Toolbar/icon-only | `ghost` |
+| Selected state | `active` |
+| Toggle | `outline` |
 
-### Delete Confirmations
-Always Modal with: title "Delete {ItemType}", consequence text, `text-[var(--text-error)]` warning, Cancel (default) + Delete (destructive) buttons.
+## Delete/Remove Confirmations
 
-### Toast Notifications
-Use imperative API: `toast.success(msg)`, `toast.error(msg)`. Never build custom notification UI.
+Modal `size="sm"`, title "Delete/Remove {ItemType}", `variant="destructive"` action button, `variant="default"` cancel. Cancel left, action right (100% compliance). Use `text-[var(--text-error)]` for irreversible warnings.
 
-### Badges
-Green=success, red=error, amber=warning, blue=info, gray=neutral. Use `dot` prop for status indicators.
+## Toast
 
-### Forms
-Use `FormField` + `Input`/`Textarea` from emcn. Never raw HTML form elements.
+`toast.success()`, `toast.error()`, `toast()` from `@/components/emcn`. Never custom notification UI.
 
-### Loading States
-Use `Skeleton` matching the actual UI structure dimensions.
+## Badges
 
----
+`red`=error/failed, `gray-secondary`=metadata/roles, `type`=type annotations, `green`=success/active, `gray`=neutral, `amber`=processing, `orange`=paused, `blue`=info. Use `dot` prop for status indicators.
+
+## Icons
+
+Default: `h-[14px] w-[14px]` (400+ uses). Color: `text-[var(--text-icon)]`. Scale: 14px > 16px > 12px > 20px.
 
 ## Anti-patterns to flag
 
-- Raw HTML elements instead of emcn components
-- Hardcoded colors instead of CSS variable tokens
-- Custom modal/toast implementations
-- Inline styles
-- Missing `cn()` for conditional classes
-- Wrong button variant for action type
+- Raw `<button>`/`<input>` instead of emcn components
+- Hardcoded colors (`text-gray-*`, `#hex`, `rgb()`)
+- Tailwind semantics (`text-muted-foreground`) instead of CSS variables
+- Template literal className instead of `cn()`
+- Inline styles for colors/static values (dynamic values OK)
 - Importing from emcn subpaths instead of barrel
-- Using arbitrary z-index instead of tokens
+- Arbitrary z-index instead of tokens
+- Wrong button variant for action type