Better Layout
Layoutstruktur, Abstände und visuelle Hierarchie festlegen
Installation
https://github.com/jakubkrehel/skills/tree/main/skills/better-layout
When structuring page layouts, reviewing component spacing, or validating alignment across responsive breakpoints.
- Autor
- jakubkrehel
Positionierung und Abstände schaffen die Hierarchie einer Oberfläche, noch bevor visuelle Gestaltung hinzukommt. Dieser Skill baut das strukturelle Grundgerüst auf und prüft es bei Größenänderungen, Lokalisierungen und RTL-Darstellungen.
Schwerpunkte
- Abstandsstrategie: Gruppiert Inhalte hierarchisch mit konsistenten Abständen, 8 px innerhalb und 16 px zwischen Gruppen
- Konsequente Ausrichtung: Bewahrt einheitliche Kanten und reduziert dadurch visuelle Unruhe
- Gestaltung interaktiver Elemente: Stellt sicher, dass Bedienelemente klar von statischen Inhalten unterscheidbar sind
- Schrittweise Offenlegung: Prüft, ob verborgene Inhalte durch sichtbare Hinweise auffindbar bleiben
- Inhaltsfluss: Richtet Layouts an natürlichen Leserichtungen aus, von oben nach unten und vom Zeilenanfang zum Zeilenende
Verwenden Sie den Skill beim Strukturieren von Seiten, Prüfen von Komponentenlayouts oder Verfeinern von Abständen über responsive Breakpoints hinweg. Er wird als Agent Skill für Claude Code installiert.
Ähnliche Skills
Better Typography
SkillWebtypografie für gut lesbare, barrierefreie Schrift
Better Interface
SkillUI-Prüfungen bündeln und Ergebnisse nach Schweregrad ordnen
Site Architecture
SkillWebsite-Hierarchie, URLs und Navigation klar strukturieren
Kommentare(0)
Zum Kommentieren anmelden