| name | mobile-ux-review |
| description | Use for mobile-first redesigns, tracker UX work, homepage/calculator/shops polish, Arabic/RTL mobile review. |
| when_to_use | ["A page feels cramped, slow, or unusable on a real phone","You're shipping a redesign and need a mobile-first audit","Arabic/RTL parity check across changed surfaces","Mobile keyboard / input / sticky-control regressions reported"] |
| related_files | ["styles/global.css","styles/pages/**","index.html, tracker.html, calculator.html, shops.html, methodology.html","src/components/nav.js, src/components/footer.js, src/components/ticker.js"] |
| related_prompts | [".github/prompts/mobile-ux-audit.prompt.md",".github/prompts/tracker-flagship-revamp.prompt.md",".github/prompts/accessibility-audit.prompt.md"] |
Skill: Mobile UX Review
Use this to systematically improve mobile UX without breaking Arabic/RTL parity or accessibility.
Inputs to gather
- Which pages are in scope (homepage, tracker, calculator, shops, methodology, country pages)
- Target viewports (default: 360, 390, 430, 768)
- Whether RTL/Arabic parity is part of the scope (default: yes)
- Performance baseline (current Lighthouse mobile scores from
docs/performance-baseline.json)
Workflow
- Establish baseline. Take "before" screenshots at each target viewport, EN + AR.
- Apply page-specific checklist (below).
- Apply cross-cutting checklists: tokens, RTL mobile, accessibility.
- Implement changes in coherent commits — token first, then surface, then page.
- Take "after" screenshots at same viewports.
- Run
npm run lint, npm run validate, npm test. Optionally npm run a11y.
- Report with screenshot pairs + Lighthouse delta.
Checklists in this skill
Common mistakes
- Polishing desktop and shipping; mobile regresses.
- Adding sticky bars that overlap the chart on 360px.
- Translating English-shaped copy as Arabic (run it past a native speaker or simplify).
- Forgetting
inputmode on numeric inputs.
- Reducing font sizes to "fit" mobile (use truncation + tooltips, not font shrinks).
- Removing the freshness pill to "declutter" — that's a trust violation.
Final report template
# Mobile UX Review — <scope>
## Pages
- <page>: before / after screenshots at 360 / 390 / 430 / RTL-360
## Changes
- Token: <e.g. consolidated card padding into --space-card>
- Component: <e.g. nav drawer rebuilt with <details>>
- Page: <e.g. tracker hero rebalanced; karat strip scannable at 360px>
## Verification
- `npm run lint` PASS
- `npm test` PASS
- `npm run validate` PASS
- Lighthouse mobile: <before>/<after> for LCP, CLS, TBT
- RTL: verified at <viewports>
## Follow-ups
- <e.g. consider rebuilding calculator inputs as bottom-sheet on mobile>
