SuperAPI AI 工具集

inspect-ui

前端与建站

查看项目

更新于 10-16 06:20

技能介绍

用途:inspect-ui 用于审查改动浏览器渲染界面(HTML、CSS/样式、JSX/TSX、Vue/Svelte 组件、模板)的 diff 或分支。其核心原则是:视觉结论必须由渲染结果裁定,不能靠推断;静态阅读只能产生假设,假设被当作发现就是在用证据的外衣包装猜测。

主要流程:1)界定范围,用 git diff <base>...HEAD --name-only 找出浏览器渲染的文件,并映射到对应屏幕或路由;2)优先在本地运行应用,读取 docs/agents/project.md 的 Run locally (dev),若无法运行则报告首行声明 cannot drive — static review only,后续每个视觉结论都标注 unverified (static);3)打开浏览器前先跑确定性检查,包括对改动样式文件用 grep -nE '#[0-9a-fA-F]{3,8}\b|rgba?(' 检查非令牌颜色,用 grep -nE 'outline: *(none|0)' 检查被抑制的焦点样式;4)确定契约来源,优先级为功能 design.md 的 ## UI design 段、已批准的 docs/standards/design-tokens.md、仓库令牌/主题文件与周边屏幕视觉语言;5)在运行的应用中用 kimi-webbridge 驱动(单会话、newTab:true,不使用 find_tab active:true),先以 cdp Emulation.setDeviceMetricsOverride 依次设置 1440×900、768×900、375×900 视口再截图,不使用 Playwright,截图存到 .skills/<CODE>/inspect-ui/(无 CODE 则 .skills/inspect-ui/<branch>/),不改动工作树;检查滚动宽度是否超过视口、横向溢出/裁切/重叠,覆盖 hover、键盘焦点、选中、禁用、空、错误及组合状态,按契约核对状态与令牌,计算实际渲染值下的 WCAG 对比度,若样式定义了第二主题则两种主题都截图;6)按固定格式报告,每条发现含严重级别、file:line、截图路径、重要性说明与修复建议,并给出 needs-human-eyes 与 verdict 行(UI: clean | findings | cannot drive (static only))。

限制与注意:无法运行时只能进行带标注的静态审查;视觉发现若没有截图路径也无 unverified (static) 标注则不算完成;审查过程中不得改动工作树、索引或分支状态;375px 视口不可跳过;组合状态必须实际产生后观察,不能凭声明顺序判断。安装命令、收费与价格信息暂未提供。