Skip to content
Get packs

Mobile Layout Rules

Makes the agent build layouts that reflow properly from phone to desktop, not just shrink.

Source Download skill
Repository
miqdadbadjuber/anti-slop
Stars
7,976
Licence
MIT
Files
1 file

What it does

This skill is a set of written design rules that an AI coding agent reads before editing a page's layout. It teaches the agent to treat mobile screens as their own designed state, rather than a desktop layout squeezed into a phone, and to avoid common mistakes such as fixed-pixel type, full-screen 100vh sections, desktop-sized padding, and breakpoints chosen to match phone models. It is a companion to a core rules file (antislop.md) and refers to that file's rule numbers.

Great for

  • Front-end developers who want an AI agent to produce responsive layouts that hold up at every screen width
  • Designers or teams reviewing generated web pages for mobile layout problems
  • Anyone using the antislop core rules who needs deeper mobile-specific guidance

Skip it if

  • Native iOS or Android app layout, since the rules are written for web layouts (CSS media queries, viewport units)
  • Projects that do not already use the core antislop.md file, because the skill cross-references rule numbers it does not contain
  • Situations needing a complete design system, since this file covers only the layout concern

Try asking

  • “Make this landing page layout work well on phones and tablets without just shrinking the desktop version”
  • “Review my CSS grid and find where the layout breaks between 600 and 1024 pixels wide”
  • “Replace the fixed pixel font sizes in this component with a responsive type scale”
  • “Fix the full-height hero sections that overflow on mobile browsers”
Step-by-step guide: how to use Mobile Layout RulesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    antislop-layoutmobile.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip antislop-layoutmobile.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip antislop-layoutmobile.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Load the core antislop.md file together with this skill, since the rules reference core rule numbers and the Delivery Gate.
  • Ask the agent to check the layout by narrowing the browser viewport across the full range, not only at two widths.
  • Review the agent's edits to stylesheets, since the skill can write and edit files directly.

What's inside

  • SKILL.md

Redistributed unmodified from miqdadbadjuber/anti-slop under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.