Guide · Agent skill
How to use the Mobile Layout Rules agent skill (antislop)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Mobile Layout Rules skill (antislop-layoutmobile) is a set of written design rules that an AI coding agent reads before it edits a page's layout. It pushes the agent to treat phone screens as their own designed state instead of a desktop layout squeezed into a narrow width. This guide covers what the skill does, how to install it, how to trigger it, and what it needs to work.
Mobile Layout Rulesmiqdadbadjuber/anti-slop · MIT Download the skill Quick start
- 1Download the ZIP. Get the skill ZIP from the page where you found this guide, then unzip it so you have the skill folder with its SKILL.md file.
- 2Place the folder. Copy the folder into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project only. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
- 3Add the core file. Make sure the companion antislop.md core file is available, since this skill cites its rule numbers.
- 4Make a layout request. Ask your agent for a layout task that must reflow across screen sizes, such as a grid that has to stack on phones.
- 5Check the result at narrow widths. Narrow the viewport and review the layout where it changes, confirming that text, grids, and tap targets hold up.
What the skill makes the agent do
The skill targets layouts that have to reflow across screen sizes, from phone to desktop. It covers breakpoints, type and spacing scale, grids, overflow, tap targets, and navigation.
Its core principle is that mobile layout is a different layout, not the desktop layout at a smaller size. A layout must re-stack, rescale, and re-order its content with intent at each width.
- Places breakpoints where the content breaks, not at phone model widths
- Avoids fixed-pixel type, full-screen 100vh sections, and desktop-sized padding
- Collapses multi-column grids to a single reflowing column where needed
- Checks the whole layout at narrow widths, not just the patched spots
Install the skill in Claude Code or the Claude apps
Download the ZIP for this skill from the page where you found this guide, then unzip it. The skill is a folder containing a SKILL.md file.
For a personal install that applies to all your projects, place the unzipped folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder.
If you use the Claude apps instead, upload the skill under Settings → Capabilities → Skills.
Meet the requirements before you start
The skill needs an AI coding agent that can read SKILL.md files, such as Claude Code. It also needs the companion antislop.md core file, because the skill refers to core rules by number and does not contain them.
The skill declares the Read, Write, Edit, Glob and Grep tools. Without the core file, the rule numbers it cites have nothing to point to, so load both together.
- An agent that can read SKILL.md files (for example Claude Code)
- The antislop.md core file, loaded alongside this skill
- Read, Write, Edit, Glob and Grep tool access
Trigger the skill with natural requests
Ask for work that matches the skill's scope: a layout that has to hold up across screen widths, from phone to desktop. The skill's description names grids, overflow, and tap targets, so requests about those topics are the clearest fit.
The core file's guidance says to load this skill together with antislop.md whenever the task is mobile or responsive layout work, so name both in your request if your setup does not load them automatically.
- Make this pricing grid stack cleanly on phones and tablets.
- Fix the horizontal overflow on the product page at 375px wide.
- Review this landing page for mobile layout problems and tap targets.
- Build a responsive card layout that works at every screen width.
Mistakes the skill is designed to catch
Each pattern in the skill has a Tell (what it looks like), a Why (why it reads as slop), and a Fix. The skill cites the governing core rule as R-XX.
- Desktop-only layout: the mobile view is just the desktop layout squeezed into a phone.
- Breakpoints matched to phone models such as 375px or 414px instead of where content breaks.
- Mobile rules added as a trailing override that patches one or two symptoms.
- Two-state layouts that leave tablet widths, roughly 600 to 1024px, unplanned.
- Fixed pixel type, 100vh sections that overflow on mobile browsers, and oversized section padding.
- Multi-column grids that do not collapse, and fixed-width grid templates.
Safety notes: scripts and network
The skill does not run scripts and does not use the network. It is a document the agent reads, and it declares file tools only.
Because it allows Write and Edit, the agent can change your layout files when you ask it to edit a page. Review the agent's edits in your normal version control workflow before you ship them.
Tips for better results
Ask the agent to verify at narrow widths. The skill asks for the whole layout to be checked across the range of widths, not only at two sample points.
Keep the core file and this skill in sync. The cited rule numbers only make sense against the matching antislop.md.
- Name the widths you care about, such as a narrow phone and a mid-size tablet.
- Ask for a mobile checklist run alongside the core Delivery Gate.
- Use the skill for web layouts only, not native iOS or Android screens.
What people use it for
- Making a multi-column product grid collapse into a readable single column on phones.
- Removing horizontal overflow from a page that spills past the screen width.
- Replacing 100vh hero sections so they do not overflow mobile browser chrome.
- Reviewing a generated landing page for desktop-only layout and oversized mobile padding.
Frequently asked questions
How do I install the Mobile Layout Rules skill?
Download the ZIP from the page where you found this guide and unzip it. Place the folder in ~/.claude/skills/ for all projects, or in a project's .claude/skills/ folder for one project. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
What do I need to use antislop-layoutmobile?
You need an AI coding agent that can read SKILL.md files, such as Claude Code. You also need the companion antislop.md core file, because this skill refers to core rule numbers that are not included in it.
Is the Mobile Layout Rules skill free?
The source identifies the licence as MIT. Check the licence text in the repository for the full terms before you use or redistribute it.
Can I use this skill for native iOS or Android apps?
No. The skill is written for web layouts that use CSS media queries and viewport units. Native app layout is outside its scope.
Does the skill run scripts or use the internet?
No. The skill runs no scripts and uses no network. It declares the Read, Write, Edit, Glob and Grep tools, so it works only through file access.
Does this skill replace a full design system?
No. It covers only the layout concern for mobile and responsive work. A complete design system needs more than this file provides.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or reviewer who wants an AI agent to produce responsive layouts that hold up at every screen width, and you already use the antislop core rules. Pick something else if you build native iOS or Android layouts, do not use the antislop.md core file, or need a full design system rather than a layout-focused guide.
Download the skill