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）来切换暗色模式。
• 状态捕获：