Maintenance
Wie Consumer Updates ziehen und das Brand Kit synchron halten
Design Systeme aendern sich — neue Farben, zusaetzliche Komponenten, aktualisierte Regeln. Diese Seite erklaert wie du Updates bekommst (als Consumer) und wie du Aenderungen dokumentierst (als Brand Kit Maintainer). Kein Vorwissen noetig.
Updates installieren (Pull)
Wenn jemand das Brand Kit aktualisiert hat und du die neuen Werte in deinem Projekt brauchst.
Neue Version pruefen
npm outdated @panoptia/coffee-elements-brand-kitUpdate installieren
npm update @panoptia/coffee-elements-brand-kitChangelog lesen
Pruefe ob sich Tokens, Guidelines oder Component-Specs geaendert haben. Die Versionshistorie unten zeigt was sich geaendert hat.
Betroffene Stellen pruefen
Wenn du var(--ce-*) Tokens verwendest, greifen neue Werte automatisch. Nur bei neuen Tokens oder geaenderten Guidelines: Code anpassen.
Aenderungen dokumentieren (Push)
Du hast etwas am Design geaendert — neue Farbe, zusaetzliche Komponente, angepasste Regeln. So haltst du das Brand Kit synchron.
Design bauen
Aenderungen in packages/brand-kit/ vornehmen: Tokens, Guidelines, Komponenten-Specs, Presets.
/sync-brandkit ausfuehren
Der Sync-Skill prueft automatisch ob alle Dokumentationsstellen noch konsistent sind. Er zeigt was veraltet ist und schlaegt Updates vor — schreibt aber erst nach deiner Bestaetigung.
/sync-brandkitVorschlaege pruefen und bestaetigen
Der Skill zeigt konkrete Diffs. Du entscheidest was uebernommen wird. Nichts wird automatisch geschrieben.
Version hochzaehlen und committen
Version in packages/brand-kit/package.json erhoehen (Patch fuer Fixes, Minor fuer neue Features). Dann commit und push.
Der /sync-brandkit Skill
Ein Claude Code Befehl der nach Design-Aenderungen automatisch prueft ob die Dokumentation noch stimmt. Kein Magic — er liest git diffs und vergleicht sie mit den Dokumentationsstellen.
Was brauche ich?
Claude Code (installiert und konfiguriert). Der Skill liegt bereits im Repo unter .claude/commands/sync-brandkit.md — du musst nichts extra installieren.
Wie rufe ich ihn auf?
In Claude Code: /sync-brandkit. Der Skill analysiert die letzten Aenderungen in packages/brand-kit/ und zeigt Inkonsistenzen.
Was prueft er?
Ob geaenderte Tokens in den Guidelines aktualisiert sind. Ob neue Components in den Komponenten-Seiten dokumentiert sind. Ob die Versionshistorie aktuell ist. Ob CLAUDE.md die richtigen Dateien listet.
Wann ist ein Sync noetig?
Neue Komponente im Brand Kit
Guideline in guidelines/components/ anlegen, Component-Spec in components/ anlegen, /sync-brandkit ausfuehren.
Token-Werte geaendert
design-tokens.css aktualisieren, /sync-brandkit ausfuehren. Die /for-ai Seite aktualisiert sich automatisch beim naechsten Build.
Guidelines aktualisiert
Guideline-Datei aendern, /sync-brandkit ausfuehren. Prueft ob die Prototyp-Seiten noch konsistent sind.
Versionshistorie
10 Kategorie-Icons als paired Light/Dark SVGs (Kaffee, Kaffeemaschine, Siebträger, Barmaschine, Eversys, Eversys Single, Mühle, Filterkaffee, Wasserfilter, Zubehör), assets/icons/ im Paket, Tailwind dark:-Variante statt CSS-Filter.
/for-ai generiert aus Quelldateien (kein Hardcoded Content), claude-md-fragment.md wiederhergestellt, /sync-brandkit Skill, Erstnutzer-Intros, Push/Pull-Workflow auf Maintenance-Seite.
Guidelines im Figma Make Format (18 Dateien), /for-ai Seite, 3-Pfade-Onboarding, Agent-Checklisten, Design Rules erweitert.
Unified --ce-* Token-Prefix, Accent-Palette, Table-Tokens, Shopify Preset, Font Guide, Component Matrix.