| name | review-ui-screenshots |
| description | Perform a deliberate screenshot-based UI/UX review after browser-visible changes, visual regression checks, rendered UI quality checks, or screenshot evidence review. Use after screenshots have been captured for EDHB UI work, especially Pixi canvas HUD, board, setup, tower/action panel, targeting, notice, editor, and responsive layout changes. |
Review UI Screenshots
Use this skill after agent-browser or another browser workflow has produced screenshots for EDHB frontend-visible work. The goal is to catch visible regressions that a casual glance can miss.
Required Inputs
- The screenshot artifact paths.
- The viewport size for each artifact.
- The interaction state shown in each artifact, such as setup, selected tile, selected tower, targeting controls, invalid command notice, active wave, paused run, map editor, disabled controls, or mobile layout.
- The intended change, so old behavior is not mistaken for a regression.
If any required input is missing, inspect what is available and state the gap in the review note.
Review Method
Inspect each screenshot one region at a time. For EDHB, explicitly check the board, path, enemies, towers, projectiles, combat effects, canvas HUD panels, generated-map controls, authored-map and editor controls, selected-tile panel, selected-tower panel, tower catalog, build/upgrade/sell controls, targeting mode controls, enemy-priority controls, wave readouts, notices, footer controls, and any mobile or narrow-layout rearrangement.
For every region, check:
- Text overlap, clipping, truncation, awkward wrapping, or unreadable contrast.
- Controls that touch panel borders, drift off-center, crowd adjacent text, or lack clear internal padding.
- Button groups, tabs, segmented controls, selectors, priority controls, and editor tools that change size or alignment across states.
- Disabled, active, hover, focus, selected, loading, empty, error, and invalid states that no longer read as intentional controls.
- Weak visual hierarchy, missing labels, hidden affordances, inconsistent repeated spacing, or unclear relationship between labels and values.
- Board-first composition problems, including HUD panels covering important routes, enemies, projectiles, tower ranges, or notices.
- Responsive regressions between desktop, narrow desktop or tablet, and mobile captures.
When before and after artifacts exist, compare the same viewport and interaction state directly. Treat differences in spacing, alignment, hierarchy, and readability as findings when they make the UI feel less deliberate, even if nothing technically overlaps.
Output
End with a concise Screenshot UX Review note containing:
- Artifact paths reviewed.
- Viewports and interaction states inspected.
- Findings, grouped by severity when there are multiple.
- Fixes made during the task.
- Deferred issues, or
None if nothing remains.
Do not call the UI work complete until blocking or obvious quality-bar findings have either been fixed or explicitly deferred by the user.
