Communitygithub.com

TomasValleDuran/ui-ux-playbook

Der Einstiegspunkt für jede UI/UX-Arbeit im Web oder auf Mobilgeräten – der komplette Workflow (Brief → Richtung → System → Stack → Build → Motion → Verifizieren), Industriestandards und Best Practices (WCAG 2.2, Apple HIG, Material 3, Nielsen-Heuristiken, Laws of UX, Core Web Vitals, Formulare, Navigation, Zustände, i18n), eine Pre-Ship-Checkliste und eine Routing-Übersicht, die dir sagt, welche spezialisierte Design-/Animations-/Farb-/Bibliotheks-Fähigkeit für welche Teilaufgabe geladen werden soll.

Was ist ui-ux-playbook?

Das UI/UX Playbook ist eine umfassende Sammlung von Best Practices und Workflows für die Gestaltung von Benutzeroberflächen im Web und auf mobilen Geräten. Es beschreibt einen klaren, skalierbaren Prozess vom Briefing über die Designrichtung bis hin zur Implementierung, Motion und finalen Überprüfung. Dabei werden relevante Industriestandards wie WCAG 2.2 (Barrierefreiheit), Apple HIG, Material 3, Nielsen-Heuristiken und die Laws of UX berücksichtigt. Das Playbook enthält außerdem eine Routing-Tabelle, die für jede spezifische Aufgabe (z. B. Farbschemata, Typografie, Barrierefreiheit oder Animation) die passende spezialisierte Skill-Datei empfiehlt. Entwickler und Designer können dieses Playbook nutzen, wenn sie ein neues Frontend oder eine mobile App starten, Bildschirme erstellen oder überarbeiten, die UI/UX-Qualität prüfen oder einfach eine fundierte Antwort auf die Frage „Was ist die Best Practice für X im Interface-Design“ benötigen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/TomasValleDuran/pomos-skillzzeria/tree/HEAD/plugins/skillzzeria/skills/ui-ux-playbook
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

UI/UX Playbook

Großartige Oberflächen entstehen aus drei Dingen, die zusammenwirken: einer klaren Sichtweise (wer, welche Aufgabe, welches Gefühl), einem konsistenten System (Tokens + Komponenten) und hunderten korrekten Details (Zustände, Bewegung, Barrierefreiheit, Text). Dieses Playbook orchestriert das Arsenal an Fähigkeiten, die jeden Teil abdecken.

Workflow für jede UI-Aufgabe

Skaliere ihn: Eine Button-Anpassung benötigt die Schritte 5–7; eine neue App alle.

  1. Brief — Wer ist die Person, was ist die Aufgabe (Verb), welcher Kontext/welches Gerät, wie soll es sich anfühlen (konkrete Worte). Leite dies aus der Codebasis und der Anfrage ab; stelle nur dann eine Frage, wenn eine kritische Einschränkung nicht bekannt ist (Plattform, bestehende Marke, Zielgruppe).
  2. Richtung — Wähle den ästhetischen und interaktiven Charakter vor dem Code. Sieh dir 2–4 echte Referenzen für diesen Bildschirmtyp an (ui-stack-advisor/references/inspiration.md).
  3. System — Tokens und DESIGN.md (design-system-builder; Farben über color-theory). Bestehendes Projekt? Lies und befolge dessen System; erweitere es, leite es nicht ab.
  4. Stack — Komponenten-/Animationsbibliotheken (ui-stack-advisor). Verwende barrierefreie Grundbausteine; programmiere keine Dialoge, Menüs, Comboboxen, Datumsauswahlen oder Toasts von Hand.
  5. Bauen — Struktur und Hierarchie zuerst (Layout, Typografie, Abstände), dann Farbe, dann Detail. Echte Inhalte, kein Lorem Ipsum. Alle Zustände: laden, leer, Fehler, teilweise, erfolgreich, deaktiviert, langer Inhalt.
  6. Motion — Nur dort, wo es einen Zweck erfüllt (Feedback, Kontinuität, Zustandsänderung); siehe Motion-Fähigkeiten.
  7. Durch Anschauen verifizieren — Rendere es (Entwicklungsserver + Playwright/Chrome MCP/Simulator), überprüfe es in echten Größen (390, 768, 1280+; kleines Telefon, Tablet), beide Farbschemata, nur Tastatur, 200 % Zoom / größter dynamischer Typ. Behebe, was du siehst, in Batches.
  8. Überprüfen — Führe die folgende Pre-Ship-Checkliste oder eine Review-Fähigkeit aus.

Welche Fähigkeit für was (Routing)

BedarfLaden
Ästhetische Richtung für Landing Pages, Marketing, markantes visuelles Designfrontend-design
Produkt-UI (Dashboards, SaaS, Admin, Tools) mit persistentem Design-Gedächtnisinterface-design
Designsystem, Tokens, Theming, plattformübergreifende Tokens, DESIGN.mddesign-system-builder
Farben auswählen/ableiten, Paletten, Dark-Mode-Farben, Kontrast, Farbblindheitssicherheitcolor-theory (generiert) · better-colors (auditiert)
Typografie: Skala, Umbruch, Schriftart-Features, Abschneidenbetter-typography
Layout: Gruppierung, Ausrichtung, responsiv, i18n-Platzbetter-layout
Feinschliff: Radius, Schatten, Icons, optische Ausrichtungbetter-ui
Barrierefreiheits-Review/-Korrektur (WCAG 2.2)better-accessibility
UX-Texte, Labels, Fehler, Leere Zuständebetter-writing
Rank-Review des gesamten Bildschirms über alle oben genannten Bereichebetter-interface · Branch/PR-Review: interface-review
Auswahl von Komponenten-/Animations-/Widget-Bibliothekenui-stack-advisor
Animationsphilosophie, Easing, Dauern, Federn, Komponentengefühlemil-design-eng
Eine Web-Animation bauenanimate · mehrere Elemente zusammen: choreograph
Ruckelige Animationen überprüfen/auditieren/korrigierenreview-animations · improve-animations · animation-performance
Apple-typische flüssige Bewegung, Gesten, Materialien (Web oder nativ)apple-design
Mobiles Web, das sich nativ anfühlt (PWA, Touch, 100vh, Safe Areas)mobile-native
React Native / Expo Design & Reviewmobile-design · Animation: animate-expo · Expo-Plugin-Fähigkeiten: expo-native-ui, expo-ui, expo-design-system, expo-animation, expo-router
shadcn/ui Spezifikashadcn (Vercel Plugin)
Komponentenvarianten / Zustandsgalerie / Stresstestvariant · state-machine · break (benutzergesteuert)
Diagramme und Datenvisualisierung für Dashboardsdataviz
Figma ↔ CodeFigma MCP-Fähigkeiten (figma-design-to-code, figma-generate-library, …)

Konfliktregel: Wenn zwei Fähigkeiten widersprüchliche Aussagen treffen, gewinnt das bestehende DESIGN.md/System des Projekts, dann der Brief des Benutzers, dann die spezifischere Fähigkeit (z. B. animate-expo über emil-design-eng in einer Expo-App). Stapele nicht mehrere ästhetische Richtungsfähigkeiten für eine Aufgabe – wähle eine aus (frontend-design oder interface-design).

Spickzettel für Standards

Barrierefreiheit (WCAG 2.2 AA – gesetzlicher Standard in den USA (ADA/508), der EU (European Accessibility Act, in Kraft seit Juni 2025) und vielen anderen)

  • Kontrast 4,5:1 für Text, 3:1 für großen Text und UI-Komponenten/bedeutungsvolle Grafiken
  • Alles per Tastatur bedienbar; sichtbarer Fokus (2.4.7), nicht durch klebrige UI verdeckt (2.4.11); logische Reihenfolge
  • Zielgröße ≥ 24 × 24 CSS-Pixel (2.5.8) – für 44 × 44 entwerfen
  • Ziehen hat eine Einzelzeiger-Alternative (2.5.7)
  • Beschriftungen für jede Eingabe, Fehler im Text identifiziert, keine Informationen nur durch Farbe
  • Text auf 200 % vergrößerbar / umbrechen bei 320 px Breite ohne horizontalen Scrollbalken (1.4.10)
  • Reduzierte Bewegung respektieren; kein Blitzen > 3/s; automatisch bewegte Inhalte > 5 s pausierbar
  • Konsistente Hilfe-Position (3.2.6), keine redundante erneute Eingabe (3.3.7), zugängliche Authentifizierung – keine kognitiven Tests, Einfügen/Passwort-Manager erlauben (3.3.8)
  • Semantisches HTML zuerst; ARIA nur zur Lückenfüllung. Nativ: Barrierefreiheits-Labels/Traits (iOS), contentDescription/semantics (Android/Compose), accessibilityLabel/accessibilityRole (RN)

Plattformen

  • iOS (HIG): 44×44pt Ziele, Tab-Leiste für Top-Level-Navigation (≤5), Navigations-Stack mit Zurück-Wischen, Sheets mit Detents, SF Symbols, Dynamic Type, semantische Farben, Liquid Glass für die Steuerungsebene (iOS 26+), Haptik für bedeutungsvolle Ereignisse
  • Android (Material 3 / Expressive): 48×48dp Ziele, Navigationsleiste/Schiene/Schublade nach Breitenklasse, predictiver Zurück-Button, randlos mit Einzügen, dynamische Farbe, M3-Schriftgradskala
  • Details und Unterschiede: references/mobile-standards.md

Leistung (Core Web Vitals, 75. Perzentil): LCP ≤ 2,5 s · INP ≤ 200 ms · CLS ≤ 0,1. Auf Eingabe innerhalb von ~100 ms reagieren; Fortschritt für alles > 400 ms anzeigen (Doherty-Schwelle); Skelette für Inhalte, Spinner für Aktionen; optimistische UI, wo sicher. Mobil: 60/120 fps, JS-Thread frei halten (Reanimated worklets), Listen virtualisiert.

UX-Prinzipien: Nielsens 10 Heuristiken + Laws of UX (Fitts, Hick, Jakob, Miller/Chunking, Tesler, Doherty, Peak-End, Aesthetic-Usability, Von Restorff, Gestalt). Musterleitfäden für Formulare, Navigation, Suche, Tabellen, Onboarding, leere/Fehler-/Ladezustände, Benachrichtigungen, Einstellungen, destruktive Aktionen: references/ux-principles-and-patterns.md.

Ethik: Keine Dark Patterns (Confirmshaming, Roach-Motel-Kündigung, vorausgefüllte Einwilligungen, künstliche Dringlichkeit, versteckte Kosten, Nötigung). Sie sind zunehmend illegal (EU DSA/DMA, FTC Click-to-Cancel-Regeln, GDPR-Einwilligungsregeln) und untergraben Vertrauen.

Pre-Ship-UI-Checkliste

  • Zweck jedes Bildschirms in 5 Sekunden offensichtlich; eine primäre Aktion pro Ansicht
  • Hierarchie beim Zusammenkneifen der Augen lesbar (Größe/Gewicht/Kontrast, nicht nur Farbe)
  • Abstände, Radius, Schriftart, Farbe nur aus Tokens; konsistent mit DESIGN.md
  • Lade-, Leer-, Fehler-, Teil-, Offline- und Langinhaltszustände entworfen
  • Formulare: Beschriftungen, korrekte Eingabetypen/Autofill, Inline-Fehler, erhaltene Eingabe bei Fehler, kein Einfügen blockieren
  • Tastatur: Tab-Reihenfolge, sichtbarer Fokus, Escape schließt Overlays, Fokus kehrt zum Auslöser zurück
  • Screenreader: Namen/Rollen/Zustände, Live-Regionen für asynchrone Aktualisierungen, Überschriftenstruktur
  • Kontrast in beiden Farbschemata gemessen; nichts wird nur durch Farbe vermittelt
  • Responsiv bei 320 / 390 / 768 / 1024 / 1440; Touch-Ziele ≥ 44; keine Hover-Only-Affordanzen
  • Bewegung zweckmäßig, ≤ 300 ms für UI, unterbrechbar, reduzierte Bewegung respektiert
  • Text: spezifische Verben auf Buttons, Fehler erklären die Behebung, konsistente Terminologie, i18n-bereit (keine verketteten Strings, Platz für +30–40 % Text, RTL-sichere logische Eigenschaften)
  • Leistung: Bilder dimensioniert/lazy, Schriftarten vorgeladen/getauscht, kein Layout-Shift, lange Listen virtualisiert
  • Das gerenderte Ergebnis angesehen (Screenshots in echten Größen), nicht nur den Code

Web-Code-Audit mit dem vollständigen Regelsatz (Fokus, Formulare, Animation, Typografie, Inhalt, Bilder, Leistung, Navigation, Touch, Theming, i18n, Hydration, Text, Anti-Patterns): lies references/web-interface-guidelines.md und berichte als datei:zeile - problem.

Referenzen

  • references/web-interface-guidelines.md — Vercels Web Interface Guidelines (eingekauft, MIT) für Code-Audits
  • references/ux-principles-and-patterns.md — Heuristiken, Laws of UX und bewährte Muster auf Pattern-Ebene
  • references/mobile-standards.md — iOS HIG + Material 3 Grundlagen und Plattformunterschiede
  • references/arsenal.md — jede installierte UI-Fähigkeit: Quelle, Lizenz, Verwendungszweck, Aktualisierungshinweise; optionale Extras

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

TomasValleDuran/color-theory

Color theory and palette engineering for UI on any platform (web, iOS, Android, Flutter, React Native). Choose and derive brand palettes, build tonal ramps, tinted neutrals and status colors, map them to light/dark semantic tokens, and verify contrast (WCAG 2.2 + APCA) and color-blind safety with a bundled zero-dependency OKLCH tool. Use this whenever the user picks, generates, critiques or fixes colors — "what colors should I use", brand color, palette, color scheme, theme, dark mode colors, accent, gradient, "this looks dull/garish", contrast problems, color-blind friendliness, or turning one hex into a full system — even if they don't say "color theory".

TomasValleDuran/design-system-builder

Create, extend, or audit a design system for any project and platform — design tokens (color, typography, spacing, radius, elevation, motion, breakpoints), token architecture (primitive → semantic → component), the W3C DTCG token format, theming (light/dark, brands, density), multi-platform output (CSS variables, Tailwind v4 @theme, React Native, Flutter, SwiftUI, Compose), component API conventions, documentation (DESIGN.md, Storybook) and governance. Use this whenever the user starts a new app and needs a visual foundation, says "design system", "design tokens", "theme", "style guide", "UI kit", "make it consistent", "set up Tailwind theme", wants to unify inconsistent UI, extract tokens from existing code or Figma, support dark mode or multiple brands, or share styles between web and mobile.

TomasValleDuran/ui-stack-advisor

Curated, up-to-date knowledge of UI component libraries, animation libraries and building blocks (icons, charts, tables, forms, toasts, drag-and-drop, virtualization, rich text) for web (React, Next.js, Vue, Svelte, Solid, Angular) and mobile (React Native/Expo, Flutter, SwiftUI, Jetpack Compose), with a decision process for picking one. Use this whenever a project is being started or scaffolded, when the user asks "which UI library / component library / design kit should I use", compares libraries (shadcn vs MUI vs Mantine, Tamagui vs NativeWind, etc.), needs a specific widget (date picker, data table, command palette, carousel, bottom sheet, chart), wants "cool animated components", or when you are about to hand-roll a component that a mature library already solves well.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community