A systematic workflow to audit and improve mobile UX, including support for Arabic/RTL parity and accessibility.
Install
mkdir -p .claude/skills/mobile-ux-review && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16580" && unzip -o skill.zip -d .claude/skills/mobile-ux-review && rm skill.zipInstalls to .claude/skills/mobile-ux-review
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use for mobile-first redesigns, tracker UX work, homepage/calculator/shops polish, Arabic/RTL mobile review.Key capabilities
- →Improve mobile UX systematically
- →Establish performance baselines with screenshots
- →Apply page-specific checklists
- →Apply cross-cutting checklists for tokens, RTL mobile, accessibility
- →Implement changes in coherent commits
- →Report with screenshot pairs and Lighthouse delta
How it works
The skill systematically improves mobile UX by establishing baselines, applying checklists, implementing changes, and reporting results with screenshot comparisons and performance metrics.
Inputs & outputs
When to use mobile-ux-review
- →Audit homepage mobile responsiveness
- →Check RTL parity for Arabic localization
- →Debug sticky control regressions on mobile
- →Validate mobile keyboard and input behavior
About this skill
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. Optionallynpm run a11y. - Report with screenshot pairs + Lighthouse delta.
Checklists in this skill
checklists/homepage.mdchecklists/tracker.mdchecklists/calculator.mdchecklists/shops.mdchecklists/rtl-mobile.md
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
inputmodeon 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>
When not to use it
- →When a page does not feel cramped, slow, or unusable on a real phone
- →When not shipping a redesign that needs a mobile-first audit
- →When not performing an Arabic/RTL parity check
Limitations
- →Requires inputs such as pages in scope, target viewports, and performance baseline.
- →Does not automatically fix common mistakes like polishing desktop and shipping.
How it compares
This skill provides a structured workflow for mobile UX review, including specific checklists and reporting, which is more complete than a general mobile responsiveness check.
Compared to similar skills
mobile-ux-review side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| mobile-ux-review (this skill) | 0 | 3mo | No flags | Intermediate |
| audit | 0 | 3mo | No flags | Intermediate |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
| web-coder | 0 | 3mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
audit
educlopez
Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table. Invoke when the user asks for audit on their UI, or mentions 'audit' alongside design / UI / frontend work.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
web-coder
mochan-tk
Use when: implementing frontend web apps with HTML, CSS, TypeScript, React, accessibility, responsive layout, or performance concerns.
web-coder
Bonzokoles
Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminolo
frontend-developer
bonnguyenitc
Use when building web UI, designing component architecture, or reviewing frontend code — regardless of framework (React, Vue, Svelte, etc.)
senior-frontend
FISCFED9
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.