Skill: modeler-tool-design

Das verbindliche UI/UX-Design-System für Miragon-Software. Sie sorgt dafür, dass jede gebaute Oberfläche — die diagram-js-Modeler und jede andere Miragon-App — wie eine Produktfamilie aussieht und sich verhält: gleiche Farben, Schrift, Chrome-, Dialog- und Feedback-Muster.

Plugin	miragon-brand
Aufruf	/miragon-brand:modeler-tool-design
Quelle	plugins/miragon-brand/skills/modeler-tool-design

Was die Skill macht

Sie gibt Claude das Produkt-UI-Regelwerk an die Hand und wendet es an — sie wird nicht als Dokument ins Ziel-Repo kopiert:

• Farbsystem im Code: Blau führt, Grün ist Akzent (nie Fließtext auf Weiß), funktionale Status- Ebene, Brand-Gradient.
• Typografie: Geist + Geist Mono, self-hosted, auch auf SVG-Canvas-Text.
• Layout & Chrome: full-bleed Canvas + floating chrome, kein Header-Bar, 8-Punkt-Raster.
• Komponenten: Buttons, Menüs, Dialoge, Inputs, Toasts, Empty-/Landing-State.
• Canvas: ein heller Modus, stabile SVG/PNG-Exporte, Domain-Farben aufs Palette-System gemappt.
• Accessibility: Kontraste, Fokus, Tastatur, prefers-reduced-motion.
• Umsetzung für diagram-js: Token-Modul, :root, Drift-Test als Single Source of Truth.

Token-CSS: einmal vendoren, immer aktuell

Die Skill bringt die kanonische Token-CSS als Asset mit (cd-tokens.generated.css, generiert aus brand/tokens.json). Beim Anwenden kopiert der Agent diese Datei unverändert ins Ziel-Repo und überschreibt sie bei jeder erneuten Anwendung — so bleibt die vendorte Kopie automatisch aktuell, ohne dass jemand HEX-Werte nachzieht. Die Datei wird nie von Hand geändert; Änderungen gehen upstream in brand/tokens.json und werden neu generiert.

Wann sie triggert

Automatisch, sobald du eine Miragon-Produkt-Oberfläche baust oder änderst: Web-App, Editor, Canvas, VS-Code-Webview, Button, Menü, Dialog, Input, Toast, Zoom, Landing-/Empty-State, Farbe im Code, Theme oder Token. Stichworte wie „UI", „Frontend", „Komponente", „Button", „Dialog", „Toast", „Canvas", „Modeler", „App", „Theme" oder „CSS" lösen sie aus.

So nutzt du sie

# Marketplace + Plugin (einmalig)
/plugin marketplace add Miragon/corporate-identity
/plugin install miragon-brand@miragon

# Skill gezielt aufrufen
/miragon-brand:modeler-tool-design

Damit das Design in einem Tool-Repo verbindlich ist, gehört in dessen CLAUDE.md ein Pflicht-Abschnitt, der auf die Skill zeigt (Vorlage in der SKILL.md).

Aufbau

modeler-tool-design/
├── SKILL.md                        # handlungsorientierte Kurzfassung + Checkliste
└── assets/
    ├── modeler-design-system.md    # ausführliche Quelle der Wahrheit
    └── cd-tokens.generated.css     # kanonische --cd-* Tokens, ins Ziel-Repo zu kopieren

Die cd-tokens.generated.css wird aus brand/tokens.json synchronisiert (npm run assets:sync), damit das Bundle nie von der Marke abweicht.

Verwandt

• corporate-design: das Marken-Aussehen (Logo, Farbwerte, Bildwelt). modeler-tool-design überträgt es auf gebaute Produkt-Oberflächen.
• brand-tone: jedes Wort in der UI.
• brand-review: prüft ein fertiges UI-Stück gegen die CI.