| name | audit-design-system |
| description | Audit & fix design system usage — migrate @trycompai/ui and lucide-react to @trycompai/design-system |
Audit the specified files for design system compliance. Fix every issue found immediately.
Rules
@trycompai/design-system is the primary component library. @trycompai/ui is legacy — only use as last resort when no DS equivalent exists.
- Always check DS exports first before reaching for
@trycompai/ui. Run node -e "console.log(Object.keys(require('@trycompai/design-system')))" to check.
- Icons: Use
@trycompai/design-system/icons (Carbon icons), NOT lucide-react. Check with node -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
Button with loading, iconLeft, iconRight props 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/ui imports — check if DS equivalent exists
- Find
lucide-react imports — find matching Carbon icons
- Migrate components and icons
- Run build to verify:
bunx turbo run typecheck --filter=@trycompai/app