mobile-ux-optimizer

What it does

This skill helps AI agents analyze and improve the user experience of mobile web applications. It focuses on identifying layout issues, optimizing touch targets, and ensuring responsive design standards are met for better mobile accessibility.

When to use it

• Auditing existing websites to find elements that break or misalign on smaller screens.
• Refining button sizes and spacing to ensure they are easy to tap on touch devices.
• Generating recommendations to fix viewport scaling problems before launch.
• Improving overall navigation flow for users accessing sites via smartphones.

Key capabilities

• Detects common mobile layout errors such as horizontal scrolling or text overflow.
• Evaluates the size and placement of interactive elements against touch-friendly guidelines.
• Assesses responsiveness across various device widths and screen resolutions.
• Provides actionable feedback to enhance mobile-first design patterns.

Example prompts

• "Analyze this HTML snippet for mobile usability issues and suggest fixes."
• "Optimize the layout of my e-commerce product page for better mobile tap targets."
• "Check if my website's navigation menu is accessible on small screens and propose improvements."

Tips & gotchas

Ensure you provide clean, semantic HTML or CSS when asking for analysis to get the most accurate results. This tool focuses on frontend structure; it cannot fix backend logic or server-side performance bottlenecks that indirectly affect mobile speed.