# UI Review Workbench

一个配置驱动的本地前端评审台。它并列承载真实产品页面、产品原生 Story/Fixture 和真实截图录屏，自身不重画或伪造产品界面。

本仓库提供 `ui-review` CLI 和配套 Skill；使用旧插件版的用户请按下面的方式安装，原 MCP 入口已由 CLI 替代。

## 使用

```bash
npm ci
npx playwright install chromium
npm link

ui-review init --config ./review.json
ui-review dev --config ./review.json --out ./dist --port 5180
ui-review probe --config ./review.json
```

也可以不安装全局命令：

```bash
node ./bin/ui-review.mjs build --config ./review.json --out ./dist
```

完整配置字段见 [docs/config.md](docs/config.md)，最小配置见 [examples/minimal.json](examples/minimal.json)。

## 能力

- 真实产品 iframe、Story iframe、图片、视频、代码和说明面板
- macOS 风格窗口、拖拽排序、自由并排与分行、布局记忆和重置
- `适应框内` 与 `原始 100%` 两种观察尺度
- iframe 内部、窗口画布、评审台外层之间的滚动处理
- 页面探测、截图、录屏和渲染表面颜色测量
- 可重复的页面状态操作与可见性、文本、数量、属性断言
- 产品 Git diff 中的个人路径和评审专用残留审计

## 边界

- 候选版本在临时 worktree 中运行真实 App；评审台指向各实例 URL。
- 产品仓库不得因评审增加或遗留专用路由、fixture、假状态、variant 开关或适配 CSS。
- 状态准备脚本只存在于任务产物中，通过真实 UI/API 或项目原生 seed 写入真实数据；禁止拦截接口或直接修改前端 store 伪造通知。
- 外部项目应运行自己的 App/Storybook；无法运行或嵌入时，使用明确标记的真实截图或录屏。
- 每次评审的配置、截图、录屏与构建结果属于任务产物，不属于本仓库源码。
- Agent 的选择和操作规范由 [skills/review-frontend-variants](skills/review-frontend-variants/SKILL.md) 维护；该 Skill 调用本仓库 CLI，不保存核心实现副本。

## Codex Skill

仓库中的 Skill 是唯一源文件。本地 Codex 通过符号链接直接读取它：

```bash
npm run link:skill
```

命令遇到已有的非链接目录或指向其他来源的链接时会拒绝覆盖。

## 开发

```bash
npm run verify
```

测试覆盖 CLI、配置校验、页面探测、颜色测量、窗口分行持久化和嵌套滚动处理。