Chrome Verification

Two tools — pick based on need:

Default to library scripts. Only use MCP when you need a real-time see-think-act loop.

Project Details

Customize for your project:

- Dev server: `{{YOUR_DEV_SERVER}}` (e.g., localhost:3000)
- Check: `lsof -i :{{PORT}} -sTCP:LISTEN`
- Login: {{YOUR_LOGIN_FLOW}}
- Playwright installed as dev dep with Chromium

What to Verify

Focus on what's relevant to your change — not everything every time.

Always check:

• •Does it look correct at desktop and mobile? Nothing overflowing or cut off?
• •Does the change match the intent? No regressions in surrounding UI?

If touching layout/styling:

• •Spacing rhythm consistent (not random padding values)
• •Typography hierarchy clear
• •Alignment — elements line up, tables/cards are even

If touching RTL/i18n (if applicable):

• •Switch to RTL language and verify layout mirrors
• •Logical properties working (no hardcoded left/right)
• •Text reads naturally

If touching data displays (tables, cards, charts):

• •Loading state (skeletons, spinners)
• •Empty state (no data scenario)
• •Long content — does text truncate with tooltip? Do numbers fit?

If touching interactive elements:

• •Click/hover states work
• •Disabled states look distinct
• •Forms validate and show errors correctly

Common gotchas:

• •Sidebar collapse behavior on smaller screens
• •Sticky table headers/columns on scroll
• •Currency/number formatting consistency
• •Date formatting consistency