quaesitor-scientiam/vebidor

Lies zuerst die Datei README.md in diesem Skill – sie enthält:

• Was Vebidor ist (ein V-sprachiger W3C WebDriver + WebDriver-BiDi-Client) und was es nicht ist (keine App, keine Website, kein Logo im Quellcode – jede Grafik ist eine vorgeschlagene Identität, gekennzeichnet).
• INHALTSGRUNDLAGEN – die Stimme (technisch, leistungsorientiert, vergleichsbasiert), die Großschreibungsregeln und der tragende Emoji-Wortschatz (✅ ⚠️ 🐛 ✨ 🎉 🏆 ⚡ 🚀 📦 📖 🎯 🌐 🎭 📱). Emojis sind Teil dieser Marke; behalte sie in Dokumentationen und Marketing-Oberflächen.
• VISUELLE GRUNDLAGEN – Palette, Schriftart, Abstände, Bewegung, Oberfläche, Kartenanatomie.
• IKONOGRAFIE – Emojis für Status; Lucide für UI-Chrom (gekennzeichneter Austausch); monochrome SVG-Glyphen für Browserlogos.
• Index – was wo liegt.

Erkunde dann die anderen Dateien:

• colors_and_type.css – alle Design-Tokens (--vb-blue-500, --slate-950, --code-keyword, --font-mono, --space-*, --radius-*, --shadow-*, --motion-*) sowie Basis-Schriftstile und .chip-Klassen. Füge dies als <link rel="stylesheet"> in alles Neue ein – es ist die Grundlage.
• preview/ – 19 eigenständige Designsystem-Karten (Farben, Schrift, Abstände, Komponenten, Marke), deren Markup du übernehmen kannst.
• assets/ – Platzhalterlogos (gekennzeichnet) und Browser-Glyphen.
• ui_kits/docs/ – hochauflösende React-Dokumentationsseiten-Neuerstellung (TopNav, Sidebar, TocPanel, DocsPage, CodeBlock, Callout, ComparisonTable, ApiSignature). Komponentenumfang: Jede Datei hängt ihre Exporte an window an, damit andere <script type="text/babel">-Dateien sie nutzen können. Zum Erweitern kopiere Komponenten, füge den <script type="text/babel" src="…">-Tag in index.html ein und folge dem gleichen window.X = X-Muster.
• ui_kits/marketing/ – Neuerstellung der Landingpage (MarketingNav, Hero, FeatureGrid, BrowserMatrix, PhasesTimeline, MarketingFooter). Gleiches Komponenten-Gültigkeitsmuster.
• fonts/README.md – Schriftarten, die über das Google Fonts CDN geladen werden (Geist + JetBrains Mono). Austausch ist gekennzeichnet; tausche sie aus, wenn der Benutzer andere Markenschriftarten hat.

Wenn du aufgerufen wirst

Wenn der Benutzer dieses Skill ohne weitere Anleitung aufruft, frage, was er erstellen möchte (Dokumentationsseite? Landingpage-Abschnitt? CLI-Ausgabe-Mockup? Versionshinweis-Grafik? Vergleichstabelle? Terminal-Screenshot?). Frage, welche Oberfläche (Dokumentation, Marketing, Terminal) und welchen Ausschnitt der API sie hervorheben möchten. Handle dann als erfahrener Designer, der HTML-Artefakte ausgibt – oder Produktionscode, wenn sie am echten Repository arbeiten.

Beim Erstellen visueller Artefakte (Folien, Mockups, Wegwerf-Prototypen)

1. Kopiere die benötigten Ressourcen aus assets/ und eventuelle Vorschauelemente, deren Markup du übernehmen möchtest.
2. Erstelle eine statische HTML-Datei im aktuellen Projekt. Verlinke colors_and_type.css (relativer Pfad).
3. Verwende die Grundlagen: --vb-blue-500 für Akzente, --code-bg/--code-fg und Token-Klassen für Code, .chip chip--success etc. für Status, --font-sans + --font-mono.
4. Behalte Emojis dort, wo die Marke sie verwendet. ✅ ⚠️ ✨ 🏆 sind tragend, nicht dekorativ.
5. Erfinde keine Verläufe oder abgerundete linke Kartenränder. Verwende flache Oberflächen, Rahmen und eine einzige Höhenstufe.

Beim Arbeiten an Produktionscode

Lies dieses Skill als Markenreferenz. Übernehme Werte (Hex-Codes, Schriftstapel, Radien, Bewegungszeiten) aus colors_and_type.css, anstatt sie von Screenshots abzuschätzen. Komponentenmuster in ui_kits/ sind kosmetische Neuerstellungen, kein Produktionscode – portiere das Styling, nicht die JSX-Verkabelung.

Hinweise, die zu erwähnen sind

Wenn der Benutzer dich bittet, ein echtes Logo, echte Schriftarten oder echte Ikonografie auszuliefern – halte inne und frage nach. Alles hier ist aus der Prosa des Quell-Repositorys abgeleitet (das keine visuelle Identität hat). Lehne eine Kanonisierung ab.