| name | ui-review |
| description | Verify UI/UX by running Playwright tests and reviewing screenshots. Use when you want to check that a page looks correct and the user flow works — after implementing UI changes, fixing visual bugs, or verifying an existing page. Triggers: 'check the UI', 'does this page look right', 'verify the layout', 'review screenshots', 'run UI tests'. |
| dependencies | ["test"] |
| agents | ["ui-review"] |
UI Review
Run Playwright tests to generate fresh screenshots, then review them for UI/UX correctness.
Process
1. Identify what to review
Determine which page/component to verify. The user may specify:
- A test class name (e.g.
*LoginTest)
- A page or component name (search for the corresponding Playwright test)
- A screenshot folder to review directly (skip to step 3)
2. Run tests to generate screenshots
Run the relevant Playwright test(s) to produce fresh screenshots. Check references/project.md for the exact test command and flags. If no project overlay exists, run:
/test *TestClassName
If no Playwright test exists for this page, tell the user — don't silently skip.
3. Review screenshots
Spawn the ui-review subagent on the screenshot folder. Provide:
- The screenshot path (check
references/project.md for the convention, or search for the test's screenshot output)
- The expected flow: what each step should show, what the user should see
Agent(subagent_type="ui-review", prompt="Review screenshots for UI/UX correctness.
Screenshots: <screenshot-path>
Test: '<test name>'
Purpose: <what this test verifies>
Expected flow:
- 01: <what should be visible>
- 02: <next step>
- ...
Flag any problems: broken layouts, blank pages, missing elements, bad UX flow.")
4. Report and fix
- If the subagent reports problems, fix them and re-run (go back to step 2)
- If everything looks good, report confirmation to the user
Project Customization
Read references/project.md in this skill's directory if it exists. It provides project-specific context:
- Test command and flags for headless Playwright
- Screenshot output directory convention
- Any other project-specific patterns
