| name | verify-ui |
| description | Visual verification of frontend UI using Claude-in-Chrome browser automation. Takes screenshots of all screens at desktop and mobile viewports. |
| disable-model-invocation | true |
| user-invocable | true |
Visual UI Verification
Use Claude-in-Chrome browser automation to visually verify the FloodSafe frontend.
Prerequisites
- Frontend dev server running on
http://localhost:5175
- Chrome browser open
Steps
1. Setup
- Load Claude-in-Chrome tools via ToolSearch if not already loaded
- Call
tabs_context_mcp to see current browser state
- Create a new tab with
tabs_create_mcp
2. Desktop Screenshots (1400x900)
Navigate to http://localhost:5175 and screenshot each screen:
- Login Screen —
http://localhost:5175 (when logged out)
- Home Screen — main dashboard after login
- Flood Atlas — map view
- Alerts — alerts tab
- Profile — profile/settings
- Report — report submission flow (first step)
Use read_page to check for accessibility issues on each screen.
3. Mobile Screenshots (375x812)
- Use
resize_window to set viewport to 375x812
- Re-screenshot Home, Atlas, and Alerts screens
- Check for overflow, hidden elements, navigation usability
4. Console Check
- Use
read_console_messages to check for errors/warnings
- Report any console errors found
5. Report
Provide a summary:
- ✅/❌ Each screen renders correctly
- ✅/❌ Mobile responsive
- ✅/❌ Console clean (no errors)
- List any visual issues found with descriptions
