Audit the specified files for design system compliance. Fix every issue found immediately.
Rules
@trycompai/design-systemis the primary component library.@trycompai/uiis legacy — only use as last resort when no DS equivalent exists.- Always check DS exports first before reaching for
@trycompai/ui. Runnode -e "console.log(Object.keys(require('@trycompai/design-system')))"to check. - Icons: Use
@trycompai/design-system/icons(Carbon icons), NOTlucide-react. Check withnode -e "const i = require('@trycompai/design-system/icons'); console.log(Object.keys(i).filter(k => k.match(/YourSearch/i)))". - DS components that do NOT accept
className:Text,Stack,HStack,Badge,Button— wrap in<div>for custom styling. - Button: Use DS
Buttonwithloading,iconLeft,iconRightprops instead of manually rendering spinners/icons. - Layout: Use
PageLayout,PageHeader,Stack,HStack,Section,SettingGroup. - Patterns: Sheet (
Sheet > SheetContent > SheetHeader + SheetBody), Drawer, Collapsible.
Process
- Read files specified in
$ARGUMENTS - Find
@trycompai/uiimports — check if DS equivalent exists - Find
lucide-reactimports — find matching Carbon icons - Migrate components and icons
- Run build to verify:
bunx turbo run typecheck --filter=@trycompai/app