PR Summary

Medium Risk
Introduces new styling variants and new/changed props on shared UI components (Input, Switch, Slider, Label, Skeleton), which may require consumer updates (notably Input now reserves size). Mostly UI-only changes with limited blast radius beyond component usage.

Overview
Adds a comprehensive .claude/rules/semantic-tokens.md reference documenting EMCN semantic tokens, Tailwind extensions, component APIs, and styling guidelines.

Extends several emcn components with new variants/props and exports: Input and Textarea gain error/ghost variants (and Input adds sm/md sizing), Switch and Slider gain size variants, Label adds size variants plus a required asterisk, and Skeleton adds shape variants. Banner expands beyond default/destructive to include warning/info/success, and Combobox disallows passing the native size attribute through inputProps.

Updates the /playground page to showcase the new variants and adds sections for FormField, Banner, and Skeleton.

^{Written by Cursor Bugbot for commit 3c28b33. This will update automatically on new commits. Configure here.}

@adithyaakrishna is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

Greptile Summary

This PR expands the EMCN component library with new visual variants and sizes across six components (Input, Textarea, Label, Skeleton, Switch, Slider) and adds three semantic variants (warning, info, success) to Banner. It also ships a comprehensive semantic-tokens.md agent reference document covering all design tokens, Tailwind configuration, and per-component API docs. The playground page is updated to demonstrate all new variants.\n\nKey changes:\n- Input — added error/ghost variants and sm/md size variants (with correct Omit<…, 'size'> on InputHTMLAttributes to prevent type conflicts)\n- Textarea — added error/ghost variants; padding is duplicated across all three variant definitions rather than hoisted to the base class\n- Label — added sm/md/lg size variants and a required prop (renders a red asterisk)\n- Skeleton — added line/circle/rectangle shape variants via CVA\n- Switch — added sm/md/lg size variants with mathematically correct thumb translation values for each size\n- Slider — added sm/md/lg size variants via a typed config object (reasonable choice given the multi-element composition)\n- Banner — added warning, info, success variants using raw Tailwind palette classes instead of semantic tokens, inconsistent with the guidelines documented in this very PR\n- index.ts — updated to re-export newly added types and variant functions

Confidence Score: 4/5

Safe to merge; all variant logic is additive and non-breaking with two minor style clean-ups worth addressing.

The component changes are well-implemented, type-safe, and consistent with the existing CVA patterns. Switch thumb translations, Slider size configs, and Input/Textarea type omissions are all correct. The only two concerns are both P2 style suggestions: Banner's new variants use raw Tailwind color classes instead of semantic tokens (in a PR that explicitly documents the 'always use semantic tokens' rule), and Textarea has duplicated padding across variants. Neither blocks a merge.

apps/sim/components/emcn/components/banner/banner.tsx — new variants use raw Tailwind colors rather than semantic tokens

Important Files Changed

_{Reviews (1): Last reviewed commit: "feat: add new variants and create docs f..." | Re-trigger Greptile}