Step 1 of 5
Audit every page at mobile widths
Get the concrete breakage list at real device sizes.
Audit the entire app at exactly 375px and 768px widths. For every page and modal record: horizontal overflow (yes/no and the offending element), unreadably small text, overlapping/cut-off elements, touch targets under 44px, unusable navigation, and broken forms/tables. Output the issues table ordered by page. Use devtools device emulation and actually interact - do not just look.
Expected after this step
A page-by-page mobile issue table from real interaction.
Should not happen
- ✕Fixed-width containers forcing horizontal scroll
- ✕Desktop nav unusable with no mobile menu
- ✕Tables overflowing with no scroll or stacking strategy
- ✕Modals taller than the viewport with unreachable buttons
Verify before continuing
Do not move on until every check is true. The complete button stays locked until then.
Do not continue if…
- !Fixed-width containers forcing horizontal scroll
- !Desktop nav unusable with no mobile menu
- !Tables overflowing with no scroll or stacking strategy
- !Modals taller than the viewport with unreachable buttons
If the AI messes this up
Use this when the AI fakes progress or breaks the feature. It forces a real fix.
The audit was visual-only or skipped pages. Re-run with device emulation, interacting with every control and modal on every page at both widths.