audit-design-system
SkillMediaLets your agent audit code for old UI library usage and migrate imports to a new design system.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the audit-design-system skill
About this capability
Audit & fix design system usage — migrate @trycompai/ui and lucide-react to @trycompai/design-system
What this skill tells your AI
The instructions your AI receives, as published by trycompai/comp in .agents/skills/audit-design-system/SKILL.md and read by ahel’s review.
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
Signals
- GitHub stars
- 2k
- Forks
- 412
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
audit-design-system- Source
- github.com/trycompai/comp