ZVV Atlas Showcase
Lauffähige Beispiele aller Atlas-Patterns. Jede Sektion verlinkt zurück zur Spec auf github.com/zvvch/zvv-atlas. Mock-Backend — keine echten Daten, kein Mail-Versand.
Pattern-Katalog
26 Sektionen · 6 GruppenFoundation
Info
Management-Deck: was Atlas ist, wie es zusammenhängt, für wen — im Vollbild.
Tech-Stack
Der Stack als Vertrag für Agenten: jede Regel mit Datei und Zeile belegt — plus /llms.txt.
Marke & Präsenz
Wie eine ZVV-App nach aussen erscheint: OG-Karte, App-Zeichen, Logo-Anwendung — und die Grenze der Wirkung.
Entscheidungen
Die offenen Spec-Entscheidungen aus den Proposals — mit Herkunft, Empfehlung und Markdown-Block zum Kopieren.
Color-Tokens
Light/Dark Token-Swatches mit Click-to-Copy.
Typographie
ZVV Brown Narrow Stufen + Geist Mono.
Organigramm
Generiertes ZVV-Organigramm — Live-Editor, SVG-Export, Embed-Snippet.
Icons
lucide-react Showcase mit Suche.
Navigation
App-Shell: Sidebar-Identität, Arbeitszeile, Breadcrumb, Footer.
Komponenten
Komponenten
shadcn/ui Button, Card, Dialog, Tabs.
Toasts
sonner Variants — success, error, info, promise.
Empty States
No-data, No-match, Error Varianten.
Skeletons
Loading-State-Skeletons: Avatar, Cards, Tabelle, KPI.
Lightbox
Vollbild für Diagramme, Grafiken & Bilder — Glassmorphism, Ratio-Sizing, Focus-Trap.
Mermaid
Architekturdiagramme in ZVV-Farben — Schrift-Messung, wrappingWidth, Sequenz-Variablen.