yonathan-boop/Claude

Mobile-Layout-Skill für antislop. Verwenden für Layouts, die über Bildschirmgrößen hinweg umfließen: Raster, Überlauf, Touch-Ziele. Zusammen mit dem Kern laden.

Was ist Claude?

Dieser Skill ist Teil des antislop-Systems und konzentriert sich auf die mobile Layout-Optimierung. Er beschreibt detailliert, wie ein Layout über verschiedene Bildschirmgrößen – vom Telefon bis zum Desktop – hinweg reflowen muss. Der Skill behandelt zentrale Themen wie Breakpoints, Skalierung, Raster, Überlauf, Touch-Ziele und Navigation. Er ergänzt die Kernregeln des antislop-Systems und sollte immer zusammen mit der Hauptdatei `antislop.md` geladen werden, wenn eine Aufgabe ein mobiles oder responsives Layout betrifft. Jeder Eintrag folgt dem Muster: Tell (das Problem), Why (warum es als Schrott gilt), Fix (die korrekte Lösung) und verweist auf die entsprechende Kernregel (R-XX). Das grundlegende Prinzip: Ein mobiles Layout ist ein eigenes Layout, nicht das Desktop-Layout in klein. Es muss mit Absicht umfließen, neu stapeln, skalieren und die Reihenfolge ändern.

Funktioniert mit✓Claude Code~Codex CLI✓Cursor

npx skills add https://github.com/yonathan-boop/Claude/tree/HEAD/skills/antislop-layoutmobile

Dokumentation

antislop-layoutmobile

Anti Slop: Regeln für KI-Codierungs-Agenten. Skill für mobiles Layout

Teil des antislop-Systems. Zusammen mit antislop.md (dem Kern) lesen. Dieser Skill vertieft das responsive Layout: wie ein Layout über Bildschirmgrößen hinweg umfließen muss – vom Telefon bis zum Desktop. Breakpoints, Skalierung, Raster, Überlauf, Touch-Ziele und Navigation. Er referenziert Kernregeln per Nummer und dupliziert oder nummeriert sie nie neu. Lade ihn, wenn die Aufgabe ein Layout erstellt oder bearbeitet, das bei jeder Bildschirmbreite bestehen muss.

So verwenden Sie diesen Skill

Laden Sie ihn immer zusammen mit antislop.md, wenn die Aufgabe für mobiles oder responsives Layout ist. Der Kern enthält den Mechanismus (den Zwecktest, die drei Stufen, das Delivery Gate); dieser Skill enthält die mobile Layout-Tiefe.
Jeder Eintrag hat die gleiche Form: Tell (das Muster), Why (warum es als Slop gilt), Fix (was stattdessen zu tun ist), mit der zitierten Kernregel als R-XX.
Das Prinzip hinter diesem Skill: Das mobile Layout ist ein eigenständiges Layout, nicht das Desktop-Layout in einer kleineren Größe. Es muss umfließen: neu stapeln, skalieren und mit Absicht die Reihenfolge ändern. Jedes Muster unten beschreibt eine Art und Weise, wie ein Layout nicht umfließt.
Das Delivery Gate im Kern bleibt das Gate. Die „Layoutmobile Skill-Checkliste“ am Ende dieser Datei ist die mobilspezifische Ergänzung, um sie parallel auszuführen.

Breakpoints

Nur-Desktop-Layout

Tell: Ein Layout-Zustand für jeden Bildschirm; die mobile Ansicht ist das Desktop-Layout, das auf ein Telefon gequetscht wird.
Why: R-03 erfordert ein mobiles Layout, das perfekt ist, kein nachträglicher Einfall. Eine Seite, die nur schrumpft, hat überhaupt kein mobiles Design: Karten, die nebeneinander funktionierten, überlappen sich, und für eine breite Leinwand gedachter Text drängt sich auf einer schmalen zusammen.
Fix: Definieren Sie einen echten mobilen Zustand am Breakpoint, an dem der Inhalt nicht mehr funktioniert. Das mobile Layout fließt um: Spalten stapeln sich, Größen werden reduziert, und die Reihenfolge ändert sich dort, wo der Inhalt es erfordert. Wenn die mobile Ansicht nur die Desktop-Ansicht bei einer kleineren Breite ist, ist das Layout nicht fertig.

Breakpoint durch Geräteliste bestimmt

Tell: Breakpoints, die nach Telefonbreiten benannt sind (375px, 414px, 768px), gewählt, weil „das die iPhone-Größe ist