Tests Responsive Mobile

What problem does it solve?

A poor mobile experience due to broken layouts, tiny touch targets, or slow performance can alienate a significant portion of users. This Skill provides a comprehensive guide to testing responsive design and mobile compatibility, ensuring your application looks and performs flawlessly across all devices.

Core Features & Use Cases

• Multi-Viewport Testing: Guides testing across essential viewports (desktop, tablet, mobile) using Chrome DevTools Device Mode and real devices for comprehensive coverage.
• Touch Interaction Validation: Ensures touch targets meet minimum size requirements (≥ 44x44 px) and touch controls are functional, enhancing usability.
• Performance Throttling: Recommends testing with 3G and CPU throttling to simulate real-world mobile conditions and identify performance bottlenecks.
• Use Case: Before launching a new feature, activate this Skill to rigorously test its responsiveness. You'll verify layouts, touch interactions, and performance on various emulated and real mobile devices, guaranteeing a smooth experience for all users.

Quick Start

1. Open Chrome DevTools (F12) and click the 'Toggle device toolbar' icon.

2. Select various mobile and tablet viewports (e.g., iPhone SE, iPad Air).

3. Enable 'Network throttling' (e.g., 'Fast 3G') and 'CPU throttling' (e.g., '4x slowdown').

4. Interact with your application to check layout, touch targets, and performance.

5. Run a Lighthouse audit for mobile performance:

npm run audit:mobile