What problem does it solve? Mobile layouts often fail because they are just shrunken desktop designs: columns collide, content overflows horizontally, tap targets are too small, and navigation breaks on phones. This Skill provides a structured rule set for AI coding agents to detect and fix these mobile layout anti-patterns. ## Core Features & Use Cases - Breakpoint and Scale Rules: Enforces content-driven breakpoints, fluid type with clamp(), mobile-specific sizing, and avoidance of 100vh and oversized padding pitfalls. - Grid, Overflow, and Touch Fixes: Covers collapsing multi-column grids, eliminating horizontal scroll leaks and clipped content, and ensuring 44x44 px tap targets with proper spacing and tap equivalents for hover-only interactions. - Mobile Navigation Patterns: Guides collapsing desktop nav bars into bottom navs or labeled menus, reserving space for fixed bars, and keeping sticky headers compact. - Use Case: When asked to make a landing page responsive, the agent loads this Skill alongside the antislop core and runs the Layoutmobile Skill Checklist to verify the layout reflows correctly at narrow widths. ## Quick Start Load this skill together with the antislop core and review my page layout so it reflows correctly on phone screens.
