Communitygithub.com

marmelab/atomic-crm

Rebrand Atomic CRM — Ändern Sie das Anwendungslogo (den Wortmarken im Header und auf den Login-/Signup-Seiten) und/oder den Titel/Namen. Verwenden Sie dies, wenn der Benutzer das CRM-Logo oder den Titel ändern, tauschen, aktualisieren oder umbenennen möchte. Behandelt die beiden Logo-Varianten für helles/dunkles Design, die drei Stellen, an denen der Titel hartcodiert ist, die Konfiguration, die darauf verweist, und — optional — das Browser-Favicon und die PWA-App-Symbole.

Was ist atomic-crm?

Diese Fähigkeit ermöglicht die vollständige Umbenennung des Atomic CRM durch Ersetzen des Logos und/oder des Titels. Sie deckt systematisch alle Stellen ab, an denen diese Elemente vorkommen: Das Logo wird in zwei Themen (hell/dunkel) auf fünf Bildschirmen dargestellt (Desktop- und Mobile-Header, Login, Signup, Bestätigung), und der Titel ist an drei Stellen hartcodiert. Die Schritte führen durch das Ersetzen der Logo-Assets, das Aktualisieren der Importe in der Konfigurationsdatei und das Ändern des Titels in `defaultConfiguration.ts`, `index.html` und `manifest.json`. Die Fähigkeit erklärt auch den Konflikt zwischen den Code-Standardwerten und den Laufzeiteinstellungen, die in `localStorage` gespeichert werden, und gibt Hinweise zur Fehlerbehebung, falls Änderungen keine visuelle Wirkung zeigen. Optional werden auch Favicon- und PWA-App-Symbole behandelt, wenn dies explizit gewünscht wird. Die Fähigkeit ist für Entwickler gedacht, die Atomic CRM umfassend und zuverlässig umbenennen möchten, ohne dass veraltete Varianten oder inkonsistente Titel zurückbleiben. Sie wird typischerweise in Verbindung mit Claude Code, Cursor oder Codex als Agenten-Fähigkeit eingesetzt.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marmelab/atomic-crm/tree/HEAD/.claude/skills/update-branding
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

update-branding

Überblick

Ändert das Logo und/oder den Titel des CRM. Das Logo wird in zwei Designs auf fünf Bildschirmen angezeigt (Desktop + Mobile Header, Login, Signup, Bestätigung), und der Titel ist an drei Stellen hartcodiert, sodass eine naive Bearbeitung einer einzelnen Datei eine veraltete Variante hinterlässt. Die folgenden Schritte erfassen alle. Abbruchkriterium: Das Logo wird in beiden Designs auf allen fünf Bildschirmen korrekt angezeigt, und der Titel ist im Header, im Browser-Tab und im PWA-Namen konsistent.

Verwendung

  • Der Benutzer möchte das CRM-Logo und/oder den Titel/Namen ändern, tauschen oder umbenennen.
  • Optional, wenn auch nach einem Update des Favicons oder der PWA-App-Symbole gefragt wird.

Nicht für Designfarben oder Komponentenstyling – siehe Skill({skill: "shadcn-customization"}).

Logo: zwei Asset-Familien

Bestätigen Sie, welche der Benutzer meint – die meisten Anfragen beziehen sich nur auf #1.

  1. App-Logo / Wortmarke (häufig) — src/components/atomic-crm/root/logos/, importiert als Modul-Assets von defaultConfiguration.ts (Vite löst die URL relativ zum JS-Chunk auf, sodass sie verschachtelte Routen wie /oauth/consent und Sub-Pfad-Deployments überlebt). logo_atomic_crm_dark.svg ist hellfarbige Grafik, die im dunklen Modus + auf allen Auth-Seiten angezeigt wird; logo_atomic_crm_light.svg ist dunkelfarbige Grafik, die im hellen Modus angezeigt wird. (Eine eigenständige ungenutzte logo_atomic_crm.svg existiert noch in public/logos/.)

    Dateien sind nach dem Modus benannt, in dem sie angezeigt werden, nicht nach ihrer Farbe – das „Dark-Mode“-Logo muss auf einem dunklen Hintergrund lesbar sein.

  2. Favicon + PWA-Symbole — nur wenn gefragt. Viel größer (34 PNGs); siehe unten.

Code-Standardwerte vs. Laufzeiteinstellungen – sie kollidieren

  • Code-Standardwerte (diese Fähigkeit): Bearbeiten Sie defaultConfiguration.ts + Assets. Eingecheckt, gilt überall und ist der einzige Weg, den Browser-Tab-Titel / das Favicon / die PWA-Symbole zu ändern.
  • Einstellungen-UI (/settings → Branding, SettingsPage.tsx): Ein angemeldeter Benutzer bearbeitet den Titel und lädt Logos hoch, pro Browser, gespeichert in localStorage als CRM.app.configuration (Logos als base64), niemals eingecheckt. Deckt nur das In-App-Logo + Header-Titel ab.

⚠️ Der Store überschattet den Code. useConfigurationContext gibt { ...defaultConfiguration, ...storedConfig } zurück (ConfigurationContext.tsx). Wenn Markenwerte jemals über /settings gespeichert wurden, werden Ihre Bearbeitungen in defaultConfiguration.ts in diesem Browser nicht angezeigt – löschen Sie den CRM.app.configuration localStorage-Schlüssel. Verdächtigen Sie dies immer, wenn eine Codeänderung keine visuelle Wirkung hat.

Schritte

  1. Sammeln Sie das Asset / die Assets. Fragen Sie nach der Datei/URL, dem Format (SVG vs. PNG) und ob es getrennte helle/dunkle Varianten oder ein Bild gibt.
    • Eine Variante → setzen Sie beide Konfigurationsschlüssel darauf; warnen Sie vor schlechtem Kontrast in einem Design (Auth-Seiten verwenden immer den Dark-Mode-Schlüssel).
    • Einfarbiges SVG → leiten Sie die andere Variante durch Austauschen der Füllfarbe (white ↔ black) ab.
  2. Platzieren Sie die Dateien in src/components/atomic-crm/root/logos/:
    • Drop-in (am einfachsten): Überschreiben Sie logo_atomic_crm_dark.svg / logo_atomic_crm_light.svg und behalten Sie die exakten Dateinamen + .svg. Die Importe in defaultConfiguration.ts zeigen bereits hierhin – erledigt. (Nur SVG.)
    • Neuer Name / Format (z. B. PNG): Speichern Sie sie als neue Dateien daneben und aktualisieren Sie dann die beiden import-Anweisungen am Anfang von defaultConfiguration.ts (sie versorgen defaultDarkModeLogo / defaultLightModeLogo; modulrelative Pfade, also "./logos/<datei>"). Kehren Sie nicht zu bloßen öffentlichen Pfad-Strings zurück – das führt Issue #291 wieder ein.
  3. Aktualisieren Sie den Titel (falls der Name geändert wird) an allen drei Stellen – defaultTitle treibt nur die erste an:
    • defaultConfiguration.ts → defaultTitle — Header <h1> + Logo alt.
    • index.html → <title> — Browser-Tab-Titel (hartcodiert, nicht zur Laufzeit gesetzt).
    • public/manifest.json → short_name + name — installierter PWA-Name.

Verbraucher (keine Bearbeitungen erforderlich, wenn Sie die Konfigurationsschlüssel behalten): layout/Header.tsx + dashboard/MobileDashboard.tsx rendern beide Varianten (CSS-geschaltet, h-6); login/{LoginPage,SignupPage,ConfirmationRequired}.tsx rendern nur darkModeLogo.

Rationalisierungen

RationalisierungRealität
„Ich habe die Logodatei geändert, das ist die ganze Aufgabe.“Das Logo wird in zwei Designs auf fünf Bildschirmen angezeigt und der Titel lebt in drei Dateien. Eine Bearbeitung hinterlässt eine veraltete Variante.
„Meine Codeänderung hat keine visuelle Wirkung, also wurde sie nicht übernommen.“Der /settings-Store überschattet defaultConfiguration.ts pro Browser. Löschen Sie den CRM.app.configuration localStorage-Schlüssel.
„Ein Bild reicht für beide Designs.“Die Auth-Seiten verwenden immer den Dark-Mode-Schlüssel; ein einzelnes Asset liest sich auf einem Hintergrund falsch. Warnen Sie oder leiten Sie die zweite Variante ab.
„Ich werde ein paar Favicon-Größen neu generieren.“Das PWA-Set besteht aus 34 PNGs. Generieren Sie jede Größe aus einer Quelle neu oder bitten Sie um das Set – bearbeiten Sie nicht nur einige manuell.

Warnsignale

  • Bearbeiten nur eines der beiden Logo-Asset-Schlüssel oder vertauschen der Hell-/Dunkel-Dateien.
  • Ändern des Titels in defaultConfiguration.ts, aber nicht in index.html und manifest.json.
  • Eine Codeänderung ohne sichtbare Wirkung, bei der der CRM.app.configuration-Store nicht gelöscht wurde.
  • Manuelles Bearbeiten einer Teilmenge von Favicon-/PWA-Größen, anstatt das gesamte Set neu zu generieren.
  • Bearbeiten des Docs-Site-Logos (doc/), wenn es nicht angefordert wurde.

Überprüfung

make typecheck fängt nur Tippfehler in Konfigurationsschlüsseln ab. Dann make start und prüfen: Header in beiden Designs, Desktop + Mobile; die Login/Signup-Seiten (dunkler Hintergrund); und falls der Titel geändert wurde, der Header <h1>, der Browser-Tab und der PWA-Name. Ein Logo, das in genau einem Design falsch ist, bedeutet, dass beide Schlüssel auf ein Asset zeigen oder die Hell-/Dunkel-Dateien vertauscht sind.

  • Beide Logo-Varianten zeigen auf die korrekten Hell-/Dunkel-Assets (benannt nach Anzeigemodus, nicht nach Farbe).
  • Logo wird in beiden Designs, Desktop + Mobile, und auf Login/Signup/Bestätigung angezeigt.
  • Wenn der Name geändert wurde, wurde der Titel in defaultConfiguration.ts, index.html und manifest.json aktualisiert.
  • Wenn keine visuelle Wirkung erscheint, wurde der CRM.app.configuration localStorage-Schlüssel gelöscht.
  • Favicon/PWA-Symbole wurden nur bei expliziter Anfrage als vollständiges Set neu generiert.

Favicon & App-Symbole (optional)

Nur wenn gefragt. Referenziert von index.html + public/manifest.json: public/favicon.ico und public/appIcon/*.png (34 Größen inkl. maskable_icon*). Generieren Sie jede Größe aus einer quadratischen Quelle (sharp / pwa-asset-generator) neu oder bitten Sie den Benutzer um das Set – bearbeiten Sie nicht nur einige manuell. Bestätigen Sie zuerst den Umfang; theme_color/background_color in manifest.json müssen möglicherweise ebenfalls aktualisiert werden.

Das Docs-Site-Logo (doc/astro.config.mjs → doc/public/logo_atomic_crm_*.svg) ist eine separate Astro-Site – lassen Sie es in Ruhe, es sei denn, es wird danach gefragt.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community