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