shadcn-code-review 是一个面向 shadcn/ui 组件的代码审查技能,来源为 existential-birds/beagle。其用途是帮助审查者系统性地检查使用 shadcn/ui 的 React 组件,重点关注 CVA 模式、asChild 组合、无障碍状态以及 data-slot 用法。
主要能力与检查维度:
-
CVA 模式:检查 className 是否被错误地放入 CVA、是否缺少 VariantProps、是否使用复合变体(compound variants)处理复杂状态组合。相关参考文档为 references/cva-patterns.md。
-
组合(composition):检查 asChild 是否配合 Slot 使用、是否缺少 Context、组件组合是否正确。相关参考文档为 references/composition.md。
-
无障碍(accessibility):检查是否缺少 focus-visible、aria-invalid、disabled 状态等。相关参考文档为 references/accessibility.md。
-
data-slot:检查是否缺少 data-slot、CSS 定位是否正确。相关参考文档为 references/data-slot.md。
审查清单包括:cn() 接收 className 而非 CVA 变体;导出 VariantProps<typeof variants> 供消费者使用;复合变体用于复杂状态组合;asChild 模式使用 @radix-ui/react-slot;Context 用于组件组合(Card、Accordion 等);使用 focus-visible: 状态而非仅 :focus;表单状态使用 aria-invalid、aria-disabled;所有交互元素提供 disabled: 变体;屏幕阅读器文本使用 sr-only;可定位的组合部件使用 data-slot 属性;CSS 使用 has() 选择器进行基于状态的样式;不直接使用 className 覆盖变体样式。
使用方式:该技能以审查流程为核心,要求在撰写面向用户的审查结论前,先按顺序通过硬性门槛(Hard gates):位置证据(每个问题需列出仓库路径及行范围或文件中的简短原文引用)、豁免检查(逐条说明为何不属于“合法模式(不要标记)”)、上下文敏感声明(针对无障碍或 Radix 相关标记,需检查文件中的导入/包装以确认实际运行内容)、协议(完成 review-verification-protocol 中的预报告验证清单)。只有全部通过后才报告仍然符合预报告检查的问题。
适用场景:审查使用 shadcn/ui 的 React 组件,尤其是对复制后的组件所做的自定义修改、与应用程序状态/数据的集成、自定义使用场景中的无障碍问题。
限制与注意事项:该技能明确列出不应标记的合法模式,包括 max-h-(--var)(Tailwind v4 CSS 变量语法,非 v3 方括号写法)、text-[color:var(--x)]、将 shadcn 组件代码复制到项目中、不记录复制的 shadcn 组件、cn() 使用多个参数、cn() 数组中的条件类、扩展基础组件而不额外文档。上下文敏感规则要求:仅当底层 Radix 原语未处理时才标记无障碍问题;仅当组件未使用可访问的 Radix 原语时才标记缺少 aria 标签;仅当变体可由现有变体组合时才标记变体增殖;仅当是自定义代码而非复制的 shadcn 时才标记组件文档。库约定说明指出,shadcn/ui 组件设计为可复制和修改,审查应聚焦于自定义修改、集成和无障碍,不应标记标准 shadcn 组件内部、Radix 原语使用模式和默认变体实现。
参考文档加载时机:审查变体定义时加载 cva-patterns.md;审查 asChild 组件组合时加载 composition.md;审查表单组件或交互元素时加载 accessibility.md;审查多部件组件(Card、Select 等)时加载 data-slot.md。
审查问题包括:CVA 变体是否与 className 属性正确分离?asChild 组合是否能与 Slot 正确工作?是否处理了所有无障碍状态(focus、invalid、disabled)?是否使用 data-slot 属性定位组件部件?消费者能否在不破坏组合的情况下扩展变体?
提交结论前需完成硬性门槛(尤其是第 4 项),然后仅报告仍通过 review-verification-protocol 预报告检查的问题。
关于收费、价格、平台支持范围等具体信息,资料中暂未提供。