Skill: icon-design

Die Skill für Icons bei Miragon. Sie wählt die passende Zeichenart (Komet, Modeler-Icon oder Lucide), baut Modeler-Icons unverändert in die Modeler ein und führt durch den Entwurf eines neuen Modeler-Icons. Kundenprojekte folgen der Marke des Kunden, dort gilt die Skill nicht.

Plugin	miragon-brand
Aufruf	/miragon-brand:icon-design
Quelle	plugins/miragon-brand/skills/icon-design
Braucht	Für den Einbau nichts weiter, die Icons liegen in der Skill. Für den Entwurf einen Klon dieses Repos mit Node 20 und lokal playwright-core.

Was die Skill macht

Aufgabe	Was passiert
Zeichenart wählen	Komet für Miragon und die Plattform, Modeler-Icon für einen Modeler und seine Dateien, Lucide für Aktionen. Die Skill sagt, was wohin gehört.
Modeler-Icon einbauen	Kopiert die fertigen Dateien unverändert ins Modeler-Repo, verdrahtet sie für VS Code, IntelliJ, Web, VitePress und Standalone, lässt den Komet im Empty State und prüft mit Checkliste und Sichtprüfung. Liefert die Gliederung für den Pull Request.
Neues Modeler-Icon entwerfen	Führt in zwölf Schritten von der Notation zur Quelle im 24er-Raster, über Bauen, Messen und Vorschau bis zum Pull Request in diesem Repo.
Funktionsicon ergänzen	Sucht erst in Lucide und zeichnet nur, wenn nichts passt, im Lucide-Stil.

Neue Modeler-Icons entstehen nur per Pull Request in Miragon/corporate-identity. Ein Modeler-Repo bekommt die Dateien fertig und ändert sie nicht.

Wann sie triggert

Wenn du in einem Miragon Modeler App-Icon, Extension-Icon, Favicon, Datei- oder Plugin-Icon setzt, ein Icon für einen neuen Modeler brauchst oder dir ein Funktionsicon fehlt. Stichworte: „Modeler-Icon“, „App-Icon“, „Favicon“, „Datei-Icon“, „pluginIcon“, „Icon einbauen“, „Icon entwerfen“, „Icon fehlt“. Nicht für Kundenprojekte mit eigener Marke.

So nutzt du sie

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

# Skill gezielt aufrufen
/miragon-brand:icon-design

Oder einfach sagen, was du vorhast: „Bau das Modeler-Icon in den Event-Storming-Modeler ein“ oder „Wir brauchen ein Icon für einen neuen Modeler“.

Aufbau

icon-design/
├── SKILL.md              # Zeichenart wählen, Einbau, Entwurf, Funktionsicon
└── assets/
    ├── einbau.md         # Einbau je Plattform, Schnipsel, Fallen, Prüfungen, PR-Vorlage
    ├── vorgehen.md       # Entwurf Schritt 0 bis 11, Regeln und Set (generiert), Vorlage
    ├── icons.json        # Set-Regeln und alle Icons (synchronisiert)
    ├── quellen/          # Quellen im 24er-Raster (synchronisiert)
    └── modeler-icons/    # fertige Dateien: app, favicon, glyph, intellij, png, ico (synchronisiert)

einbau.md und vorgehen.md sind von Hand geschrieben, die Regeln, die Tabelle des Sets und die Entscheidungen darin sind generiert aus brand/modeler-icons/icons.json. Die Icons und Quellen kopiert npm run assets:sync aus docs/public/modeler-icons/ und brand/modeler-icons/ in die Skill.

Verwandt

• Modeler-Icons: das Set mit Downloads, Einbau und Vorschau.
• Icons: die drei Zeichenarten und Lucide.
• corporate-design: Komet, Wortmarke und Farbwerte.
• modeler-tool-design: die übrige Oberfläche der Modeler.
• brand-review: prüft den Einsatz der Icons.