菜单
Reviews shadcn/ui components for CVA patterns, composition with asChild, accessibility states, and data-slot usage. Use when reviewing React components using shadcn/ui, Radix primitives, or Tailwind styling.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/existential-birds/beagle --skill shadcn-code-review命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | shadcn-code-review |
| description | Reviews shadcn/ui components for CVA patterns, composition with asChild, accessibility states, and data-slot usage. Use when reviewing React components using shadcn/ui, Radix primitives, or Tailwind styling. |
| Issue Type | Reference |
|---|---|
| className in CVA, missing VariantProps, compound variants | references/cva-patterns.md |
| asChild without Slot, missing Context, component composition | references/composition.md |
| Missing focus-visible, aria-invalid, disabled states | references/accessibility.md |
| Missing data-slot, incorrect CSS targeting | references/data-slot.md |
cn() receives className, not CVA variantsVariantProps<typeof variants> exported for consumersasChild pattern uses @radix-ui/react-slotfocus-visible: states, not just :focusaria-invalid, aria-disabled for form statesdisabled: variants for all interactive elementssr-only for screen reader textdata-slot attributes for targetable composition partshas() selectors for state-based stylingRun these in order. Do not draft user-facing findings until every gate passes for the batch you are about to report.
Location evidence — Pass: Each issue lists a repo path and either a line range or a short verbatim quote from the file you read (not from memory or diff-only guesswork).
Exemption check — Pass: For each issue, you can state in one line why it is not covered by Valid Patterns (Do NOT Flag).
Context-sensitive claims — Pass: For accessibility or Radix-related flags, you checked the file for imports/wrappers showing what actually runs (or you cite the concrete gap).
Protocol — Pass: You completed the Pre-Report Verification Checklist in review-verification-protocol for this review.
These are correct patterns that should NOT be flagged as issues:
max-h-(--var) - correct Tailwind v4 CSS variable syntax (NOT v3 bracket notation)text-[color:var(--x)] - valid arbitrary value syntaxApply these rules with appropriate context awareness:
shadcn/ui components are designed to be copied and modified. Code review should focus on:
Do NOT flag:
Complete Hard gates (especially gate 4), then report only issues that still pass the review-verification-protocol pre-report checks.