关于 21st-ui-review
面向团队和 Agent 的 UI 审查技能，用于检查前端代码。它区分已验证缺陷与主观设计建议，并为发现标注代码位置。
主要功能
- 01使用 21st 进行确定性审查
- 02检查无障碍与交互问题
- 03审查响应式和设计系统问题
- 04按文件与行号标注并排序
- 05修复后重跑测试与审查
适用场景
- 01审查键盘操作和焦点状态
- 02发现响应式溢出风险
- 03核对界面与设计令牌
- 04验证代码修改后的修复
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/21st-ui-review确认已加载。
附带文件agents/openai.yaml
详细介绍
使用证据审查 UI
将确定性缺陷与主观设计建议分开。
工作流
-
阅读
.21st/design.json、项目说明和相关源代码。 -
先进行确定性审查：
21st review <path> 21st review <path> --json -
检查实际的组件组合和运行时状态。根据代码验证各项结论，而不是从名称推断行为。
-
将发现的问题分为：
- 确定性缺陷；
- 设计系统偏差；
- 无障碍访问与交互缺陷；
- 响应式风险；
- 主观的产品／设计建议。
-
按用户影响确定优先级，并注明准确的文件和行号。
-
仅对确定性、歧义较小的问题使用
21st review <path> --fix。切勿暗中重新设计、更改品牌标识或改变产品行为。 -
修复后运行相关项目测试，并重新审查以确认问题已解决。
审查优先级
- 语义化控件和无障碍名称；
- 键盘访问、焦点可见性以及对话框／菜单行为；
- 图像替代文本和有意义的标签；
- 触控目标尺寸以及禁用／加载状态；
- 响应式溢出和固定宽度假设；
- 对减少动态效果设置的支持；
- 与项目设计令牌冲突的硬编码视觉值；
- 重复实现基础组件，而未使用现有组件；
- 字体排印、圆角、间距、阴影和图标不一致；
- 虚假数据、占位文案或缺少空状态／错误状态。
输出
首先列出可采取行动的发现，并按严重程度排序。明确标注主观建议。如果没有证据证实存在问题，请说明这一点，并指出已检查的内容。
评论
支持 Markdown