What problem does it solve? Mobile layouts often fail because they are desktop designs squeezed into a narrow viewport: grids that never collapse, horizontal overflow, oversized type, and tap targets too small for thumbs. This Skill gives an AI coding agent a structured rule set to detect and fix those mobile layout failures. ## Core Features & Use Cases - Breakpoint and Scale Rules: Enforces content-driven breakpoints, fluid type with clamp(), and mobile-specific sizing instead of fixed pixel values carried over from desktop. - Grid, Overflow, and Tap Target Checks: Covers collapsing multi-column grids, eliminating horizontal scroll leaks, and enforcing 44x44 px minimum touch targets with adequate spacing. - Mobile Navigation Patterns: Guides reflowing desktop nav bars into bottom navs or labeled menus, with safe-area and sticky-header handling. - Use Case: When asked to make a landing page responsive, the agent applies the Tell/Why/Fix patterns and runs the Layoutmobile Skill Checklist to verify the layout holds at narrow widths. ## Quick Start Load this skill together with the antislop core and ask the agent to review and fix the responsive layout of your page for mobile viewports.
