Agent Skills
› trycompai/comp
› audit-design-system
audit-design-system
GitHub审计并修复前端代码中设计系统的使用，将旧组件库和图标迁移至统一的设计系统，确保符合规范并通过构建验证。
Trigger Scenarios
需要统一前端UI组件库
迁移旧版UI到设计系统
替换第三方图标库
Install
npx skills add trycompai/comp --skill audit-design-system -g -y
SKILL.md
Frontmatter
{
"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-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
Version History
- 0ccfcc2 Current 2026-09-27 10:22
