shaharsha/claude-skill-brand-system

Brand System

Erstellt ein Brand Book + Design System, das im Wurzelverzeichnis eines Webprodukt-Repositorys liegt – als ausführliche BRAND.md (die Arbeitsreferenz, 20 Abschnitte) zusammen mit BRAND.html (der druckbaren Stakeholder-Destillation, ~7 A4-Seiten, gerendert in BRAND.pdf über Chrome Headless) und einem passenden tokens.css für Tailwind v4 @theme.

Dieses Skill erstellt das Dokument. Sein Schwester-Skill brand-assets produziert die Pixel (SVG Favicons, PWA-Paket, apple-touch-icon). Rufen Sie beide nacheinander für einen vollständigen Marken-Rollout auf.

Die fünf Artefakte

Artefakt	Beschreibung	Vorgehen
BRAND.md	Ausführliche 20-Abschnitt-Referenz	templates/BRAND.md.tmpl via scripts/new-brand-book.sh
BRAND.html	7-seitige A4-Druckdestillation	templates/BRAND.html.tmpl via demselben Skript
BRAND.pdf	Gerendert über Chrome Headless	scripts/render-pdf.sh
tokens.css	Tailwind v4 @theme + :root + [data-theme="dark"]	templates/tokens.css.tmpl + scripts/extract-tokens.py
tokens.json	W3C DTCG-Format für Style Dictionary / Tokens Studio	scripts/extract-tokens.py --format dtcg

Workflow (Entscheidungsbaum)

1. Ganz neu anfangen? – Führen Sie zuerst das Signature-Moves-Interview durch: Kopieren Sie templates/signature-interview.md.tmpl in das Repository und beantworten Sie jede Frage vor der Erstellung. Siehe reference/signature-moves.md für die Bedeutung jeder Frage. Ohne dies ist das Ergebnis eine Vorlage; damit ist es eine Marke.

2. Ein neues Buch erstellen? – Führen Sie scripts/new-brand-book.sh mit den Interview-Antworten als Flags aus. Erzeugt BRAND.md, BRAND.html, tokens.css, signature-interview.md im Ausgabeverzeichnis.

3. Ein bestimmtes Kapitel entwerfen? – Laden Sie die passende Referenz:

   • §0 Die Idee / §2 Primitive / §3 Signature Moves → reference/signature-moves.md
   • §5 Logo + Favicon-Paket → reference/favicon-pack.md
   • §6 Farbe → reference/color.md + reference/tokens.md
   • §7 Typografie → reference/typography.md
   • §10 Oberflächen & Materialien → reference/surfaces.md
   • §11 Bewegung → reference/motion.md
   • §13 Stimme & Ton → reference/voice-and-tone.md
   • §14 Barrierefreiheit → reference/accessibility.md
   • §17 Tailwind v4 @theme → reference/tailwind-v4.md
   • Hebräisch / Arabisch / RTL → reference/rtl.md

4. Favicon + PWA-Paket? – Generieren Sie keine Assets mit diesem Skill. reference/favicon-pack.md spezifiziert die Anforderungen (systembewusstes SVG-Favicon, undurchsichtiges apple-touch-icon, maskierbares PWA, OG hell+dunkel Paar). Übergeben Sie die Spezifikation + ein Quell-SVG an das Skript icon-pack.sh des Skills brand-assets.

5. Kontrastprüfung vor der Auslieferung → scripts/audit-contrast.py. WCAG 2.2 AA für Textkörper (4,5:1), 3:1 für große Elemente/Benutzeroberfläche/ Fokusringe. Läuft pro Theme (hell + dunkel). Fügen Sie die Matrix in §14 ein.

6. PDF rendern → scripts/render-pdf.sh. Chrome Headless. Erzeugt BRAND.pdf aus BRAND.html.

7. Ein bestehendes Buch prüfen → scripts/audit-outline.py. Validiert die 20-Abschnitt-Gliederung, meldet fehlende Entscheidungslogeinträge, warnt, wenn §2 Signatur-Primitive weniger als 8 dokumentierte Verwendungsstellen hat.

8. Abweichungen zwischen BRAND.md und Produktions-CSS erkennen → scripts/check-consistency.py. Brand Books scheitern, wenn der Code stillschweigend davon abweicht. Vergleicht Farbe-Tokens in BRAND.md mit einer oder mehreren Ziel-CSS-Dateien und beendet sich mit einem Fehler bei Hex-Abweichungen. In CI einbinden.

9. Interview vor der Erstellung erzwingen → übergeben Sie --require-interview path/to/signature-interview.md an scripts/new-brand-book.sh. Lehnt die Erstellung ab, wenn das Interview noch ungefüllte {{PLACEHOLDER}}, {{TODO}} oder > …-Antwortzeilen enthält. Dringend empfohlen.

Hausregeln

1. Anti-Vorlagen-Moves vor der Erstellung erzwingen. Das Interview ist nicht optional. Ein erfundenes Eigennamen, drei falsifizierbare Prinzipien, drei echte DON'Ts aus vergangenen Fehlern, eine 150-Wörter-Sprachprobe in der Stimme der Marke und ein Signature Move, der bewusst eine bewährte Methode bricht. Ohne diese ist das Buch eine Vorlage. Siehe reference/signature-moves.md.

2. Akzent konstant über hell/dunkel hinweg. Nur Oberflächen- und Text-Semantik-Tokens wechseln zwischen den Themes. Die eine gesättigte Markenfarbe ist in beiden Modi identisch – das erlaubt einer Signatur-Primitive, unabhängig von der Systempräferenz dasselbe zu bedeuten. Kodiert in templates/tokens.css.tmpl.

3. Dreistufige Tokens nach Nathan Curtis Taxonomie. Primitive (--color-cream: #F3EAD3) → semantisch (--bg: var(--color-cream)) → Komponente (--btn-bg: var(--bg-elevated)). Primitive kommen in @theme, Semantik in :root, Dark-Mode-Überschreibungen in [data-theme="dark"]. Siehe reference/tokens.md.

4. WCAG 2.2 AA ist das gesetzliche Minimum im Jahr 2026. Nicht APCA – APCA wurde im Juli 2023 aus WCAG 3 entfernt und ist nicht zurückgekehrt. AA bedeutet 4,5:1 Textkörper, 3:1 groß/Benutzeroberfläche/Fokus, 24×24 Zielgröße Minimum. Geprüft mit scripts/audit-contrast.py; siehe reference/accessibility.md.

5. RTL ist ein Fundament, kein Anhang. Wenn das Produkt auf Hebräisch oder Arabisch ausgeliefert wird, verwenden Sie CSS Logical Properties (margin-inline-start, nicht margin-left) von Tag eins; die Nachrüstkosten sind 10–50× höher als die Von-Anfang-an-Integration. Siehe reference/rtl.md.

6. Das Brand Book ist selbst eine Instanz der Marke. Die BRAND.html-Vorlage verwendet die eigene Palette + Schrift des Produkts – so sieht das Dokument auf Seite 1 wie die Marke aus. Wenn das Styling des Brand Books selbst nicht den Regeln entspricht, die es predigt, ist es falsch.

7. System-zuerst, Umschalter-zweitens für Dark Mode. Respektieren Sie prefers-color-scheme standardmäßig; persistieren Sie explizite Benutzerüberschreibungen im localStorage. Ein sichtbarer Dark-Mode-Umschalter in der Navigation ist ein Anti-Pattern. Die Regel für das systembewusste SVG-Favicon in reference/favicon-pack.md folgt derselben Logik.

Nicht-Ziele

• Logo-Grafik generieren – das ist image-generation.
• Mechanische Asset-Pipelines (PNG in SVG vektorisieren, Icon-Pack generieren, auf Größe rastern) – das ist brand-assets.
• Tatsächliche Komponenten bauen – §18 von BRAND.md dokumentiert die Spezifikationen; react-components und frontend-design implementieren sie.
• Brand-Storytelling / Marketing-Texten – §13 regelt wie man schreibt, nicht was.
• Texte übersetzen – das Skill erstellt eine RTL-bewusste Struktur, übersetzt aber nicht.
• Das Brand Book als Produkt versionieren – aktualisieren Sie es vor Ort, committen Sie mit einer klaren Nachricht, eine Wahrheitsquelle im Repository-Stamm.

Kanonische 20-Abschnitt-Gliederung (was BRAND.md.tmpl ausgibt)

#	Abschnitt	Wesentliches Muss
0	Die Idee	Ein-Satz-Kernidee + der „Streife alles bis auf X“-Test
1	Das Zeichen lesen	3–5 gleichzeitige Lesarten des Logos
2	Signatur-Primitive	Das semantische Token, das auf jeder Oberfläche erscheint – 8+ Verwendungsstellen
3	Signature Moves	5–7 Dinge, die die Marke ohne Logo identifizieren
4	Marken-Essenz	Was wir sind / nicht sind / Ton / Positionierungssatz
5	Logo-System	Varianten, Schutzraum, Mindestgröße, Don'ts, Favicon + PWA-Paket Anforderungen
6	Farbsystem	Kern + erweitert + Neutraltöne + semantische Tokens, 62/30/8-Verhältnis, hell/dunkel Parität
7	Typografie	Schriftart, Tabellenziffern, Skala, Maß, RTL-Moves, Wortmarkenbehandlung
8	Ikonografie	Stil, Farbregeln (Akzent nie verwendet), Größen-Tokens, RTL-Spiegelung
9	Abstände & Layout	8-Punkt-Raster, Container, Radien + konzentrische-Radien-Regel
10	Oberflächen & Materialien	Standard + fließendes Material, Korn-Overlay, Hero-Hintergründe
11	Bewegung	Prinzip, Tokens, die Signatur-Animation, Reduced-Motion-Verhalten
12	Bildsprache & Illustration	Fotografie-Regeln, Illustrationsstil, Anti-Patterns
13	Stimme & Ton	Regeln, Ton-Matrix nach emotionalem Zustand, 3-Ebenen-desselben-Gedankens, RTL-Besonderheiten
14	Barrierefreiheit	WCAG 2.2 AA Kontrast-Matrix, Fokusringe, reduzierte Bewegung, RTL-Äquivalenz
15	Referenzrahmen	In welchem Regal die Marke steht + was sie nicht ist
16	Anti-Patterns	Spezifische „Tu-das-nicht“-Liste – konkrete verbotene Gewohnheiten
17	Implementierung – Tailwind v4 @theme	Vollständiger Block, :root + [data-theme="dark"], Body-Regeln
18	Komponenten	Buttons, Links, Eingabefelder, Karten, Badges, Navigation, Alerts, Dialoge, Prosa, Landing-Primitives
19	Migrationsplan	Was ausgemustert wird; ✅/⚠️/❌ pro Token/Muster; Daten
20	Was dies nicht ist + Entscheidungslog	Nicht-Ziele + datierte Entscheidungstabelle mit Begründung

Kurzaufruf

# Ein neues Brand Book im Repository-Stamm erstellen
~/.claude/skills/brand-system/scripts/new-brand-book.sh \
  --product "Agentiko" \
  --positioning "Ein echter Arbeiter, der in WhatsApp lebt." \
  --palette-bg '#F3EAD3' \
  --palette-fg '#0E1320' \
  --palette-accent '#B85A3A' \
  --signature-primitive "voice dot" \
  --primary-font "Rubik" \
  --locale "he" \
  --output-dir .

# Kontrast prüfen
~/.claude/skills/brand-system/scripts/audit-contrast.py \
  --bg '#F3EAD3' --fg '#0E1320' --accent '#B85A3A'

# Das druckbare Dokument rendern
~/.claude/skills/brand-system/scripts/render-pdf.sh BRAND.html BRAND.pdf

# Später: Ein bestehendes Buch gegen die Gliederung prüfen
~/.claude/skills/brand-system/scripts/audit-outline.py BRAND.md

Verwandte Skills

• brand-assets – mechanische SVG/PNG-Pipelines; nach diesem Skill ausführen, um das Favicon-Paket zu erstellen.
• image-generation – Logo/Hero-Bildmaterial entwerfen, bevor dieses Skill ausgeführt wird.
• frontend-design – §18-Komponenten im Produktionscode implementieren.
• react-components – Komponenten-Primitives bauen, sobald §18 erstellt ist.