Ui Regression Guard

Use Playwright-based visual checks before and after UI changes that could disturb existing layouts.

Workflow

1. Identify the affected routes or screens.
2. Capture baseline screenshots for the current behavior when possible.
3. After the change, capture the same screens and compare:
   • layout shifts
   • missing controls
   • clipped content
   • mobile spacing regressions
   • console errors that accompany the visual break
4. If a redesign or template swap changed shared tokens, inspect adjacent screens, not just the edited one.
5. If a regression is found, fix it before treating the visual work as complete.

RunSmart Focus Areas

• mobile-first layouts in max-w-md shells
• today, onboarding, plan, record, chat, and profile flows
• CSS-variable and design-token changes
• post-deploy runtime asset issues that show up as visual breakage

Guardrails