用途:对已存在的自定义组件和布局做系统性审计,检查其是否符合 shadcn 设计模式、项目所选视觉风格及现代组合约定。官方 shadcn 技能在生成时约束规则,本技能负责事后审查,二者方向不同、不冲突。
主要能力:按结构、间距、设计令牌、可组合性、响应式与无障碍五类检查。结构上要求语义元素带 data-slot、组合而非修改 @/components/ui/* 原语、区分 Radix 与 Base UI 的 API。间距上要求 flex/grid 用 gap-* 而非 space-y-/space-x-,用标准间距刻度,宽高相等用 size-*。令牌上只用语义类(如 text-muted-foreground、bg-card、border-border、rounded-md),避免硬编码颜色刻度。可组合性要求接受 className 并经 cn() 合并、用 CVA 暴露变体、不硬编码内容。响应式与无障碍要求移动优先、触控目标约 44px、flex 子项加 min-w-0、语义 HTML、focus-visible 状态、尊重 motion-safe。
使用方式:先了解项目上下文,可运行 npx shadcn@latest info --json 获取框架、Tailwind 版本、原语基座、已装组件与当前风格;不可用时读 components.json 或询问所用风格。审查后按类别分组列出问题,标注 ✅ 通过、⚠️ 建议、❌ 阻断,短修复内联给出,复杂修复引用参考文件,并可询问是否应用修复。
适用场景:组件刚写完或修改后、用户粘贴组件请求审查、为已有元素加样式、迭代布局,或用户明确要求审查、检查间距、判断是否 shadcn 惯用、审计布局时触发。
限制:仅对照 shadcn 规范,不强制项目特有约定;项目约定应放入项目自身风格指南。资料未提供具体价格、平台支持范围与效果保证。