ui-validator

# UI Validator Skill (UI 验证专家技能) ## 概述 (Overview) 本技能专注于所有涉及 UI（用户界面）改动的闭环验证。它通过驱动真实的浏览器环境，确保代码层面的修改在不同主题模式、屏幕尺寸及交互状态下均能正确呈现。 ## 核心职责 (Core Responsibilities) ### 1. 开发环境自检 (Dev Server Pre-check) 在进行任何页面访问前，必须确保开发服务器 (`localhost:3000`) 已处于活跃状态。 - **端口检查**：执行 `Test-NetConnection -ComputerName localhost -Port 3000` (Windows) 或 `lsof -i:3000` (POSIX) 检查端口。 - **自动启动**：若端口未启动，则异步执行 `pnpm dev`（设置 `isBackground: true`）并等待约 5-10 秒直至就绪。 - **避免重复**：若端口已占用，严禁再次启动服务器。 ### 2. 浏览器自动化验证 (Browser Automation) 使用浏览器工具（如 Chrome MCP）进行多维检查。 - **页面访问**：导航至受影响组件所在的路由路径。 - **暗色模式切换**：通过执行脚本修改 `html` 元素的 `class`（添加/删除 `dark`）来切换暗色模式。 - **状态捕获**： - **视觉捕捉**：获取页面截图 (`browser_take_screenshot`)。 - **逻辑分析**：获取 a11y 树快照 (`take_snapshot`) 或执行 JavaScript 获取计算后的样式 (`evaluate_script`，检查 `getComputedStyle`)。 - **交互验证**：模拟用户悬停、点击等操作，验证交互反馈。 ### 3. 改动对比与修复 (Comparison & Remediation) - **视觉对比**：确认改动是否修复了原本存在的问题，或者新功能是否美观、符合 BEM 规范及样式变量。 - **回归修复**：若在浏览器中观察到样式冲突、覆盖不生效或对比度不足，必须回退至代码编辑阶段进行针对性修复。 ## 指令 (Instructions) 1. **先启动，后访问**：永远先校验 3000 端口，不要假设服务器永远运行着。 2. **多模式检查**：对于所有 UI 修改，必须分别在 `light` 和 `dark` 模式下检查。 3. **关键数据导向**：比起模糊的“看起来不错”，优先提供 `getComputedStyle` 的具体颜色值、尺寸信息或截图作为证据。 4. **证据闭环**：在任务总结中，应包含对 UI 实际表现的简短描述，必要时引用截图路径。 ## 使用示例 (Usage Example) 输入: "修改了文章卡片的圆角，并在暗色模式下加深背景。" 动作: 1. 运行 `Test-NetConnection` 确认服务器。 2. 调用 `browser_navigate` 访问演示页面。 3. 执行脚本添加 `.dark` 类。 4. 通过 `evaluate_script` 检查卡片的 `border-radius` 和 `background-color`。 5. 截图并反馈给用户。