원클릭으로
audit-design-system
Audit & fix design system usage — migrate @trycompai/ui and lucide-react to @trycompai/design-system
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Audit & fix design system usage — migrate @trycompai/ui and lucide-react to @trycompai/design-system
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
How to reuse ANY integration check's results in a feature via the universal CheckResultsService (apps/api integration-platform). Use whenever a feature needs data produced by an integration check — "show 2FA status on People", "surface AWS S3 findings in X", "reuse a check's results", "per-user/per-resource results from a connected integration", "which integrations feed task T". Read this BEFORE writing your own IntegrationCheckResult / CheckRunRepository query — don't hand-roll it.
MANDATORY for any UI work in apps/app, apps/portal, or packages/design-system — every component, page, or layout change must work on mobile (~375px), tablet (~768px), desktop (~1280px), and large desktop (~1920px) BY DEFAULT, without being asked. Read this before writing or editing any JSX/TSX that renders visible UI. Triggers on: new component, page, layout, table, toolbar, form, modal/sheet, dashboard, "build UI", "add a column", "add a filter", any styling change.
Use when building or editing frontend UI components, layouts, styling, design system usage, colors, dark mode, or icons.
The contract every new or modified API endpoint must follow so it is correct for the public OpenAPI spec, the MCP server (npm @trycompai/mcp-server), the ValidationPipe, and the docs. Triggers on "new endpoint", "add API", "new DTO", "@Body", "@RequirePermission", "MCP tool", "edit controller in apps/api", "OpenAPI", or whenever editing controllers under apps/api/src/.
Use when SDK generation failed or seeing errors. Triggers on "generation failed", "speakeasy run failed", "SDK build error", "workflow failed", "Step Failed", "why did generation fail"
Use when generating an MCP server from an OpenAPI spec with Speakeasy. Triggers on "generate MCP server", "MCP server", "Model Context Protocol", "AI assistant tools", "Claude tools", "speakeasy MCP", "mcp-typescript"
| 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.
@trycompai/design-system is the primary component library. @trycompai/ui is legacy — only use as last resort when no DS equivalent exists.@trycompai/ui. Run node -e "console.log(Object.keys(require('@trycompai/design-system')))" to check.@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)))".className: Text, Stack, HStack, Badge, Button — wrap in <div> for custom styling.Button with loading, iconLeft, iconRight props instead of manually rendering spinners/icons.PageLayout, PageHeader, Stack, HStack, Section, SettingGroup.Sheet > SheetContent > SheetHeader + SheetBody), Drawer, Collapsible.$ARGUMENTS@trycompai/ui imports — check if DS equivalent existslucide-react imports — find matching Carbon iconsbunx turbo run typecheck --filter=@trycompai/app