用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/trycompai/comp --skill ui命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Run all audit checks (RBAC, hooks, design system, tests) and verify build
Check code for the most common, high-risk security vulnerabilities (broken access control, tenant isolation, injection, secrets, SSRF, auth/session, unsafe file handling, mass assignment) before it ships. Use after editing any API controller, guard, or auth code (apps/api/src/auth/**), a Prisma schema/query, a file-upload/webhook handler, or before committing/pushing security-sensitive changes.
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.
基于 SOC 职业分类
正在显示 SKILL.md
| name | ui |
| description | Use when building or editing frontend UI components, layouts, styling, design system usage, colors, dark mode, or icons. |
Source Cursor rule: .cursor/rules/ui.mdc.
Original Cursor alwaysApply: true.
@trycompai/design-system@trycompai/ui only if DS doesn't have the component// ✅ Design system
import { Button, Card, Input, Sheet, Badge } from '@trycompai/design-system';
import { Add, Close, ArrowRight } from '@trycompai/design-system/icons';
// ❌ Don't use when DS has it
import { Button } from '@trycompai/ui/button';
import { Plus } from 'lucide-react';
DS components don't accept className. Use variants and props only.
// ✅ Use variants
<Button variant="destructive" size="sm" loading={isLoading}>Delete</Button>
<Button type="submit" iconRight={<ArrowRight size={16} />}>Continue</Button>
<Badge variant="outline">Active</Badge>
// ❌ TypeScript will error
<Button className="bg-red-500">Delete</Button>
For layout concerns, wrap DS components:
// ✅ Wrapper for width
<div className="w-full">
<Button>Full Width</Button>
</div>
// ✅ Use Stack for spacing
<Stack gap="4" direction="row">
<Button>First</Button>
<Button>Second</Button>
</Stack>
If a pattern appears 2+ times, extract it:
// Repeated? Make a component
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-green-500" />
<span className="text-sm">Active</span>
</div>
// → Create <StatusDot status="active" />
When you need new styling:
cva definition// Adding a variant
const badgeVariants = cva("...", {
variants: {
variant: {
// existing...
counter: "bg-muted text-muted-foreground tabular-nums font-mono",
},
},
});
Use CSS variables, not hardcoded colors:
// ✅ Semantic tokens
<div className="bg-background text-foreground border-border">
<div className="bg-muted text-muted-foreground">
<div className="bg-destructive/10 text-destructive">
// ❌ Hardcoded
<div className="bg-white text-black">
<div className="bg-[#059669]">
Always support both modes:
// Status colors with dark variants
<div className="bg-green-50 dark:bg-green-950/20 text-green-600 dark:text-green-400">
<div className="bg-red-50 dark:bg-red-950/20 text-red-600 dark:text-red-400">
Carbon icons from DS, not lucide:
// ✅ Design system icons with size prop
import { Add, Close, ChevronDown } from '@trycompai/design-system/icons';
<Add size={16} />
// ❌ Don't use lucide
import { Plus, X } from 'lucide-react';
<Plus className="h-4 w-4" />
// ❌ Never do these
<div style={{ display: 'flex' }}> // Inline styles
<Button className="bg-red-500"> // className on DS
<div className="bg-[#059669]"> // Hardcoded colors
<div className="w-[847px]"> // Arbitrary values