SuperAPI AI 工具集

review-ui

前端与建站

查看项目

更新于 10-15 21:35

技能介绍

用途:review-ui 是项目 UI 审查关卡,作为 review-changes 的 UI 维度被调用,专门检查那些能通过正确性审查、却会在生产环境出问题的视觉质量维度:长内容溢出与截断、响应式多屏布局、flex-grow 与固定尺寸、z-index 层级规范、SCSS/CSS/BEM 样式质量。默认范围是所有未提交的前端改动,可指定文件、目录、组件或整个前端代码库;若范围内没有前端文件则跳过并报告 clean。

主要能力:按五个类别逐文件评估。类别1 长内容溢出与截断(WARN,flex 子项截断却无 min-width: 0 时为 HIGH);类别2 响应式多屏(WARN);类别3 flex-grow 与固定宽高(WARN);类别4 z-index 层级规范(BLOCKED 硬门槛,任何 z-index !important 直接 BLOCKED);类别5 SCSS/CSS 最佳实践与 BEM(WARN,!important 与链式 BEM 修饰符为 BLOCKED)。

使用方式:先读取项目样式规则、设计系统/令牌、前端架构模式、代码审查规则四类文档,规则来自文档而非通用知识;再用 git status、git diff、git diff --cached 确定范围;若存在 .code-graph/graph.db 则运行 python .claude/scripts/code_graph trace <changed-file> --direction both --json 评估影响面;随后逐类审查并生成报告 plans/reports/ui-review-{date}-{slug}.md。审查在 $why-review --validate-findings 确认前为只读,修复后需从 Phase 0 重新完整审查。

限制:每条违规需 file:line 证据并 grep 3+ 反例;不得混用不兼容的令牌系统;缺失或过期的项目文档需先运行 $project-init 等初始化路由;Codex 镜像或 AGENTS.md 缺失时需用户运行 $sync-codex。具体项目路径、命令与令牌名称以项目配置为准,资料未提供具体值。