1. Habit
  2. Skills
  3. Antislop Layout Mobile skill
miqdadbadjuber · 5K installs

Antislop Layout Mobile skill
Runs by itself, layout code changes.

Layouts that reflow at every width.

Install the Antislop Layout Mobile skill and make it a habit: follow https://gethabit.dev/skills/miqdadbadjuber/antislop-layoutmobile.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

5K installs7K starsMIT licenceSource on GitHub ↗

Antislop Layout Mobile

by miqdadbadjuber · 5K installs

The skill

Antislop Layout Mobile is the responsive layout part of antislop: breakpoints where content breaks, mobile scale, collapsing grids, no overflow, 44px tap targets and mobile navigation, with a checklist.

Only when you ask.

The habit

Layouts that reflow at every width.

↻ Runs by itselflayout code changes

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

layout code changes. Runs in Claude Code routine.

  • ↻ layout code changes
  • pull request touches layout CSS or page components

02

It checks its work

mobile checklist passes. If a check fails, it tries again.

  • ✓zero horizontal scroll at the narrowest target width
  • ✓interactive targets are at least 44 x 44 px
  • ✓every Layoutmobile Skill Checklist item answers yes

03

It remembers

numbered audit reports. The next run reads it first: the last audit and widths that failed before.

anti-slop/audit-001-YYYY-MM-DD.md

One run, step by step.
Then it stops.

Stop ruleStops after one change and 2 fix rounds per run.

  1. 01

    Load both files

    Your agent reads antislop.md and this mobile layout skill together.

  2. 02

    Check breakpoints

    It checks states sit where content breaks, with a real middle state, not just two.

  3. 03

    Check scale

    It checks type, padding, gaps and section heights have a mobile scale.

  4. 04

    Check grids and overflow

    It checks grids collapse, nothing scrolls sideways and nothing is clipped.

  5. 05

    Check touch

    It checks tap target size and spacing and gives hover-only actions a tap equivalent.

  6. 06

    Check navigation

    It checks the nav reflows and fixed bars never cover content.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Antislop Layout Mobile skill helps.

Use it when

  • ✓ You build a responsive layout
  • ✓ A page scrolls sideways on phones
  • ✓ You check tap targets and mobile nav

Skip it when

  • – The UI is desktop only by design
  • – You do not use the antislop core

Questions

Antislop Layout Mobile skill, answered.

Should breakpoints match phone widths?

No. Place them where the content stops working.

Is 100vh fine for a hero?

Usually not on mobile; size to content or use dvh.

How do I install the Antislop Layout Mobile skill?

Copy the prompt at the top into your agent. It installs the skill from miqdadbadjuber/anti-slop and sets up the habit. Or run npx skills add miqdadbadjuber/anti-slop --skill antislop-layoutmobile.

Is the Antislop Layout Mobile skill free?

Yes. It is published under MIT. Habit is free too.

Antislop Layout Mobile. Now as a habit.

Install the Antislop Layout Mobile skill and make it a habit: follow https://gethabit.dev/skills/miqdadbadjuber/antislop-layoutmobile.md

  • Free
  • No account
  • Undo in one line

All miqdadbadjuber skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by miqdadbadjuber, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.