antislop-layoutmobile

Anti AI Slop: Design & Copy Rules. Mobile Layout skill

Part of the antislop system. Read together with antislop.md (the core). This skill deep-dives the mobile layout concern: how a layout must reflow on small screens. Breakpoints, scale, grids, overflow, tap targets, and navigation. It references core rules by number and never duplicates or renumbers them. Load it when the task builds or edits a layout that has to hold up on a phone.

How to use this skill

• Load together with antislop.md whenever the task is mobile or responsive layout work. The core holds the mechanism (the purpose test, the three tiers, the Delivery Gate); this skill holds mobile-layout depth.
• Every entry has the same shape: Tell (the pattern), Why (why it reads as slop), Fix (what to do instead), with the governing core rule cited as R-XX.
• The principle behind this skill: mobile layout is a different layout, not the desktop layout at a smaller size. It must reflow: re-stack, rescale, and re-order with intent. Every pattern below is a way a layout fails to reflow.
• The Delivery Gate in the core remains the gate. The "Layoutmobile Skill Checklist" at the end of this file is the mobile-specific supplement to run alongside it.

Breakpoints

Desktop-Only Layout

• Tell: one layout state for every screen; the mobile view is the desktop layout squeezed into a phone.
• Why: R-03 requires a mobile layout that is perfect, not an afterthought. A page that only shrinks has no mobile design at all: cards that worked side by side overlap, and text meant for a wide canvas crowds into a narrow one.
• Fix: define a real mobile state at the breakpoint where the content stops working. The mobile layout reflows: columns stack, sizes drop, and order changes where the content needs it. If the mobile view is just the desktop view at a smaller width, the layout is not done.