Menu
Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Add a new Sim settings page, or audit existing settings pages for design-system compliance with the shared SettingsPanel layout. Use when creating a settings tab, or when asked to check/clean up settings pages so they match the design system (consistent title, header, search, spacing).
Review PRs and diffs for unbounded memory loading, concurrency explosions, oversized payload materialization, and missing pagination or byte caps. Use when reviewing cleanup jobs, background jobs, data imports/exports, file parsing, API fan-out, workflow execution payloads, large arrays/files, or any change that reads many rows, files, responses, logs, or external API pages into process memory.
Add or update a Sim knowledge base connector for syncing documents from an external source, including auth mode, config fields, pagination, document mapping, tags, and registry wiring. Use when working in `apps/sim/connectors/{service}/` or adding a new external document source.
Audit an existing Sim knowledge base connector against the service API docs and repository conventions, then report and fix issues in auth, config fields, pagination, document mapping, tags, and registry entries. Use when validating or repairing code in `apps/sim/connectors/{service}/`.
Author or review a Drizzle DB migration for zero-downtime safety — expand/contract phasing, backward-compatibility with the deployed app version, and writing the `-- migration-safe` acknowledgment the check:migrations lint requires. Use when adding/editing files under `packages/db/migrations/` or changing `packages/db/schema.ts`.
Commit, push, and open a PR to staging in one shot — runs the cleanup pass and, when migrations changed, the db-migrate safety review first
| name | emcn-design-review |
| description | Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions |
Arguments:
User arguments: $ARGUMENTS
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.
apps/sim/components/emcn/index.ts (re-exports components, Calendar, Table*, and icons) to know what's available; for the full icon set read apps/sim/components/emcn/icons/index.tsapps/sim/app/_styles/globals.css for CSS variable tokens@/components/emcn barrel, never subpaths@/components/emcn/icons or lucide-reactcn from @/lib/core/utils/cn for conditional classesUse 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-body (canonical value text), --text-icon, --text-placeholder, --text-subtle, --text-inverse, --text-error
Surfaces: --bg, --surface-1 through --surface-7, --surface-hover, --surface-active
Borders: --border, --border-1, --border-muted
Brand/accent: --brand-secondary, --brand-accent
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
Badges: --badge-* semantic families (success/error/gray/blue/purple/orange/amber/teal/cyan/pink, each with -bg/-text)
Intent-to-variant mapping (read the actual buttonVariants in apps/sim/components/emcn/components/button/button.tsx for the full variant set — it exposes more than listed here):
| Action | Variant |
|---|---|
| Toolbar, icon-only | ghost |
| Create, save, submit | primary |
| Cancel, close | default |
| Delete, remove | destructive |
| Selected state | active |
| Toggle | outline |
ChipModal size='sm', title "Delete/Remove {ItemType}", destructive confirm button, plain Cancel (follow the chip footer layout in .claude/rules/emcn-components.md). Use text-[var(--text-error)] for irreversible warnings.
toast.success(), toast.error(), toast() from @/components/emcn. Never custom notification UI.
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.
Default: size-[14px]. Color: text-[var(--text-icon)]. Scale: 14px > 16px > 12px > 20px. Use the size-* shorthand — flag h-[Npx] w-[Npx] and h-N w-N pairs as refactor targets.
<button>/<input>, or legacy Input/Textarea/Modal, instead of the canonical chip components (ChipInput/ChipTextarea/ChipModal)ChipModalBody instead of ChipModalFieldtext-gray-*, #hex, rgb())text-muted-foreground) instead of CSS variablescn()