skills.rest
jls42
jls42COMMUNITY
Explore all skills by this author →
WebsiteGitHub

Tests Responsive Mobile

Test responsive layouts, touch targets, and performance across mobile viewports.

1|Updated Sep 15, 2025
Search Tags:#performance#accessibility#frontend#responsive design#ui/ux#devtools#touch controls#mobile testing
One-click install
npx skills add https://github.com/jls42/leapmultix --skill tests-responsive-mobile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Tests Responsive Mobile
Source: https://github.com/jls42/leapmultix/tree/main/.claude/skills/mobile-responsive-testing
Command: npx skills add https://github.com/jls42/leapmultix --skill tests-responsive-mobile

SYSTEM DOCUMENTATION & REQUIREMENTS

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