UI-Layout und visuellen Rhythmus verbessern
Überladene Oberflächen und repetitive Raster erschweren es, Produkte schnell zu erfassen und ihnen zu vertrauen. Diese Skill führt Claude, Codex und Claude Code zu besserem Abstand, stärkerer Hierarchie und responsiverer Komposition.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "layout" from https://skillstore.io/skills/pbakaus-layout.md and its manifest at https://skillstore.io/api/skills/pbakaus-layout/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„layout“ wird verwendet. Ein Dashboard wirkt dicht, wobei jedes Widget dieselbe Kartengröße und dieselben Abstände verwendet.
Erwartetes Ergebnis:
Die Überprüfung hebt schwache Gruppierung, wiederholten Kartenrhythmus und unklare Priorität hervor. Sie empfiehlt engere verwandte Gruppen, größere Abschnittsabstände und variierte Widget-Spannweiten.
„layout“ wird verwendet. Eine Landingpage hat mehrere identische Reihen aus Icon-, Überschrift- und Textkarten.
Erwartetes Ergebnis:
Die Skill schlägt eine abwechslungsreichere Abschnittsstruktur mit asymmetrischer Ausrichtung, weniger Karten, klarerer Inhaltshierarchie und responsiven Abstandsänderungen vor.
„layout“ wird verwendet. Eine Einstellungsseite benötigt bessere Layout-Regeln für Desktop und Mobile.
Erwartetes Ergebnis:
Das Ergebnis vergleicht Flexbox- und Grid-Entscheidungen, definiert das Abstandsverhalten und ergänzt Prüfungen für Hierarchie und Responsivität.
Static findings are false positives caused by Markdown inline code and design terminology in SKILL.md. The only semantic risk found is a low-severity mandatory invocation of another skill outside this package.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/pbakaus-layout/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/pbakaus-layout?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/pbakaus-layout?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/pbakaus-layout/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/pbakaus-layout.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>pbakaus. (2026). layout security audit report (audit version 4) [Author version 2.1.1]. Skillstore. https://skillstore.io/skills/pbakaus-layout/audits/4@techreport{pbakaus-pbakaus-layout-2026,
author = {pbakaus},
title = {layout security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/pbakaus-layout/audits/4},
note = {Author version 2.1.1}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "layout security audit report (audit version 4)"
version: "2.1.1"
type: report
authors:
- name: "pbakaus"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/pbakaus-layout/audits/4"
identifiers:
- type: other
value: "skillstore:pbakaus-layout:audit:4"
description: "Skillstore immutable audit report identifier"
Verbessere Abstände, Gruppierung und Dichte, damit operative Nutzer Inhalte schneller erfassen können.
Lockere monotone Kartenraster mit stärkerer Hierarchie, Asymmetrie und Abschnittsrhythmus auf.
Wähle Flexbox- oder Grid-Muster, die zum Inhalt passen und sich über verschiedene Bildschirmgrößen hinweg anpassen.
Überprüfe diese Oberfläche auf Abstände, Ausrichtung und visuelle Hierarchie. Schlage die kleinsten Layout-Änderungen vor, die sie leichter erfassbar machen.
Finde repetitive Kartenraster in dieser UI und schlage eine stärkere Komposition vor. Halte das Design praktisch und responsiv.
Erstelle einen Layout-Plan für diesen Bildschirm. Wähle Flexbox oder Grid für jeden Hauptbereich und definiere Regeln für Abstände, Dichte und Hierarchie.
Auditiere diese Bildschirme auf Layout-Konsistenz. Identifiziere Probleme mit Abstandsskalen, schwache Hierarchie, übermäßige Kartennutzung und responsive Risiken.
Autor
pbakausLizenz
MIT
Autorenversion
v2.1.1
Skillstore-Revision
r1
Ref.
e397ce5a135369cd6def89cb6400d013e2f68f2f
Aktualität der Wartung
23.7.2026
Nutzung
6 Downloads · 90 Aufrufe
Dateistruktur
📄 SKILL.md
UX vor dem Bauen planen
Teams erstellen häufig Interfaces, bevor sie Nutzerziele, Zustände und Einschränkungen geklärt haben. Dieser Skill leitet die Discovery und erstellt ein Design-Briefing für die Implementierung.
Projekt-Designkontext erfassen
KI-Designarbeit verliert über Sitzungen hinweg oft den Projektkontext. Diese Skill sammelt Nachweise und speichert wiederverwendbare Leitlinien für Claude, Codex und Claude Code.
Benutzeroberflächen mit Delight bereichern
Funktionale Oberflächen können in wichtigen Momenten flach, vergesslich oder frustrierend wirken. Diese Skill hilft Claude, Codex und Claude Code, durch Texte, Animationen, Feedback und Feiermuster angemessenen Feinschliff hinzuzufügen.
Bessere Onboarding-Erlebnisse gestalten
Neue Nutzer verlassen ein Produkt häufig, wenn es seinen Wert nicht schnell erklärt. Dieser Skill hilft dabei, Onboarding, Leerzustände und geführte Hilfe zu gestalten, die Nutzer zum ersten Erfolg führen.
Interface-Designs vereinfachen
Komplexe Interfaces verlangsamen Entscheidungen und verdecken das zentrale Nutzerziel. Diese Skill leitet Claude, Codex und Claude Code dabei an, Unordnung zu entfernen, Hierarchien zu klären und benötigte Funktionalität zu erhalten.
Wiederverwendbare Design-System-Muster extrahieren
Teams duplizieren häufig UI-Komponenten, Tokens und Layout-Muster in einer Anwendung. Diese Skill hilft Claude, Codex oder Claude Code dabei, wiederverwendbare Muster zu finden und sie in einem gepflegten Design-System zu konsolidieren.
Build Accessible Tailwind Interfaces
von nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Markante Landingpages gestalten
von 2389-research
Generische Landingpages schaffen weder Vertrauen noch Aufmerksamkeit. Dieser Skill führt Claude, Codex und Claude Code durch Discovery, Struktur, visuelle Ausrichtung, Animation und conversion-orientierten Feinschliff.
UI-Layout-Änderungen verfeinern
von yunshu0909
Anfragen zur UI-Gestaltung scheitern oft, wenn der Zielbereich und das gewünschte Ergebnis unklar sind. Diese Skill erstellt einen screenshot-gestützten Workflow, um den aktuellen Zustand zu bestätigen, Optionen zu vergleichen und gezielte Änderungen anzuwenden.
UI/UX-Designprozesse verbessern
von A-Genno
UI/UX-Arbeit verliert oft an Richtung, wenn Teams keine gemeinsamen Prinzipien und Review-Gewohnheiten haben. Dieser Skill gibt Claude, Codex und Claude Code eine prägnante Checkliste für Designentscheidungen.
Premium-Visual-Interfaces erstellen
von leonxlnx
Generische KI-Layouts wirken oft flach und vorlagengetrieben. Dieser Skill führt Claude, Codex und Claude Code zu hochwertigen visuellen Systemen, Bewegungsregeln und responsivem UI-Feinschliff.
Web-App-UI und -UX verfeinern
von Dicklesworthstone
Viele funktionierende Web-Apps wirken auf Desktop und Mobilgeräten noch unausgewogen. Dieser Skill bietet Agenten einen iterativen Feinschliff-Workflow für klarere Layouts, Zustände und responsive Details.