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) 先启动，后访问 ：永远先校验 3000 端口，不要假设服务器永远运行着。 多模式检查 ：对于所有 UI 修改，必须分别在 light 和 dark 模式下检查。 关键数据导向 ：比起模糊的“看起来不错”，优先提供 getComputedStyle 的具体颜色值、尺寸信息或截图作为证据。 证据闭环 ：在任务总结中，应包含对 UI 实际表现的简短描述，必要时引用截图路径。 使用示例 (Usage Example) 输入: "修改了文章卡片的圆角，并在暗色模式下加深背景。" 动作: 运行 Test-NetConnection 确认服务器。 调用 browser_navigate 访问演示页面。 执行脚本添加 .dark 类。 通过 evaluate_script 检查卡片的 border-radius 和 background-color 。 截图并反馈给用户。