Use when creating a NEW UI component in an app that uses @twelvelabs-io/react (the TwelveLabs design system) — i.e. when no existing library component fits and the user has confirmed they want a new one. Ensures the new component composes the library's atomic components (Button, Text, icons, …), styles only with design tokens (no hex/rgb, raw Tailwind palette, or bare rounded-*/font-*), and follows the library's cva + cn + data-slot pattern, including "use client" for Next.js. Trigger on "create/make a new component", "build a reusable X component", or building UI that has no matching library component.
Use when building or editing ANY UI in an app that depends on @twelvelabs-io/react (the TwelveLabs React component library) — pages, forms, dialogs, menus, layouts, or Tailwind styling. Enforces three rules: (1) reach for a library component before hand-rolling markup, (2) style only with the design tokens (colors, radius, typography, sizing) — never hardcoded hex/rgb, raw Tailwind color palette, or bare rounded-*/font-* utilities, and (3) when no library component fits, STOP and ask the user before creating one. Trigger on JSX/TSX work, "build a screen/form/card/modal", styling questions, or any import from @twelvelabs-io/react.