ui-validator

UI Validator Skill

Overview

This skill focuses on closed-loop verification of all changes involving the UI (user interface). By driving a real browser environment, it ensures that code-level modifications render correctly across different theme modes, screen sizes, and interaction states.

Core Responsibilities

1. Dev Server Pre-check

Before performing any page access, you must ensure the development server (localhost:3000) is active.

• Port Check: Run Test-NetConnection -ComputerName localhost -Port 3000 (Windows) or lsof -i:3000 (POSIX) to check the port.
• Auto-start: If the port is not started, asynchronously run pnpm dev(set isBackground: true) and wait about 5-10 seconds until ready.
• Avoid Duplication: If the port is already occupied, it is strictly forbidden to start the server again.

2. Browser Automation Verification

Use browser tools (such as Chrome MCP) for multi-dimensional checks.

• Page Access: Navigate to the route path where the affected component is located.
• Dark Mode Toggle: Toggle dark mode by executing a script to modify the html of the classelement (add/remove dark).
• State Capture：
  • Visual Capture: Capture a page screenshot (browser_take_screenshot)。
  • Logical Analysis: Capture an a11y tree snapshot (take_snapshot) or execute JavaScript to get the computed styles (evaluate_script, check getComputedStyle)。
• Interaction Verification: Simulate user actions such as hover and click to verify interaction feedback.

3. Comparison & Remediation

• Visual Comparison: Confirm whether the change fixes the original problem, or whether the new feature is visually appealing and conforms to BEM conventions and style variables.
• Regression Remediation: If style conflicts, ineffective overrides, or insufficient contrast are observed in the browser, you must fall back to the code editing stage for targeted fixes.

Instructions

1. Start First, Access Later: Always verify port 3000 first; do not assume the server is always running.
2. Multi-mode Check: For all UI modifications, you must check in both light and dark modes.
3. Key Data Orientation: Rather than a vague "looks good", prioritize providing getComputedStyle specific color values, size information, or screenshots as evidence.
4. Evidence Closed Loop: In the task summary, include a brief description of the actual UI performance, and cite screenshot paths when necessary.

Usage Example

Input: "Modified the article card's border radius and darkened the background in dark mode." Actions:

1. Run Test-NetConnection to confirm the server.
2. Call browser_navigate to access the demo page.
3. Execute a script to add the .dark class.
4. Via evaluate_script Check the card's border-radius and background-color。
5. Take a screenshot and feed it back to the user.