visalnaqvi/video-generator-skill

Marken-Kit

Erstellt ein wiederverwendbares Kit pro Kunde unter studio/brands/<slug>/:

studio/brands/<slug>/
├── brand.json         Farben nach Rollen, Schriftarten, Logo, Stimme, Fakten, Team, Angebote, Testimonials (+ berechnete Prüfungen)
├── assets.json        Index der Asset-Bibliothek (was jedes Bild zeigt, Qualität, Quelle)
├── assets/            Personen/ Angebote/ Testimonials/ Orte/ Arbeiten/ Nachweise/
├── swatch.png         Ein Vorschaubild für die Farben
├── logo/              Tatsächlich verwendete Logodateien
└── source/            Rohscannergebnisse (site.json, probe.json, candidates.json, Kontaktbögen)

Die Skills Storyboard und Render lesen colors, fonts, logo und computed; die Skill Text liest voice und facts. Schema und Rollenregeln: references/brand-schema.md.

Skripte führen die Messungen durch; Claude bewertet die Ergebnisse. Lies die JSON- und Konsolenzusammenfassungen der Skripte – lies kein rohes HTML/CSS und mache keine Vollbild-Screenshots, um Farben zu finden. Führe Skripte aus dem Studio-Root aus (node .claude/skills/brand-kit/scripts/...).

Schritt 0 – Vorhandenes Kit?

Suche nach der Marke in vorhandenen Kits, bevor du etwas Neues erstellst: Vergleiche die Wörter des Benutzers mit jedem studio/brands/*/brand.json (dessen slug, name, aka und Website in sources, z. B. "Stargate", "Sanjay Aggarwal Classes" und "stargate.net.in" sind dasselbe Kit). Nur wenn nichts passt, wähle einen neuen kurzen kebab-case slug.

• Freigegebenes Kit: Antworte aus brand.json und zeige swatch.png – kein Scannen, keine Skripte. Bei einer einfachen Frage ("Welche Farben hat Stargate?") antworte einfach. Baue nur neu auf, wenn der Benutzer eine Aktualisierung oder Erneuerung wünscht.
• Entwurfskit: Setze bei Schritt 7 (Freigabe) mit dem vorhandenen Swatch fort; scanne nicht erneut.
• Freigegebenes Kit ohne Asset-Bibliothek (kein assets.json): Führe nur Schritt 5 aus, dann gib erneut frei. Storyboards fragen danach, wenn sie Bilder benötigen.
• Aktualisierung: Führe ab Schritt 1 erneut aus, behalte alles vom Benutzer manuell Gesetzte (from: "user") und erhöhe die version.

Schritt 1 – Quellen sammeln

Verwende alles Verfügbare, in dieser Reihenfolge der Autorität:

1. Anweisungen des Benutzers ("Unser Blau ist #1F3C88") – haben immer Vorrang.
2. Markenrichtlinien / Logodateien, die der Benutzer bereitstellt oder in das assets/-Verzeichnis des Videos legt.
3. Die Website.

Frage einmal nach allem, was das Ergebnis ändern würde und nicht verfügbar ist – normalerweise nur: "Haben Sie die Logodatei oder eine Markenrichtlinie? Sonst hole ich sie von der Website." Warte nicht darauf.

Schritt 2 – Website scannen

1. Statischer Scan (immer): node .claude/skills/brand-kit/scripts/site-extract.mjs <url> studio/brands/<slug>/source/site.json Liefert CSS-Farben (Website vs. Framework-Zählungen, Marken-CSS-Variablen), Schriftarten, Logokandidaten, Meta-, Kontakt- und Überschriften.
2. Gerenderter Probe (wenn der integrierte Browser verfügbar ist – genauer, weil er misst, was tatsächlich auf dem Bildschirm ist): Öffne die Website, führe dann den Inhalt von scripts/browser-probe.js mit dem javascript_tool aus. Speichere das JSON in source/probe.json. Es meldet Hintergrundfarben nach Bildschirmfläche, Textfarben nach Textmenge, Schaltflächenfarben, Überschriften- und Textschriftarten sowie Logobilder.

Wenn der statische Scan keine Website-Farben findet (vollständig JS-gerenderte Website) und kein Browser verfügbar ist, verlasse dich auf das Logo und teile dies mit.

Schritt 3 – Logo

Wähle den besten Kandidaten (score, alt, Größe und die logos des Probes) aus; bevorzuge SVG oder das größte PNG, vermeide Favicons, wenn nichts anderes existiert. Dann:

node .claude/skills/brand-kit/scripts/logo-palette.mjs studio/brands/<slug>/logo <logo-url-or-path> [...]

Dies speichert die Dateien und meldet die tatsächlichen Farben jeder Datei nach Anteil (transparente Pixel ignoriert) und ihren Ton (welchen Hintergrund sie benötigt). Entferne jede heruntergeladene Datei, die sich als nicht das Logo herausstellt. Wenn nur ein Favicon oder ein Foto existiert, teile dies dem Benutzer mit und bitte um eine ordentliche Logodatei.

Schritt 4 – Rollen festlegen

Fülle brand.json (Format im Schema-Referenzdokument). Bewertungsregeln:

• Markenfarben stammen von der Marke, nicht von Plugins. Ignoriere framework-Farben und Standard-Theme-Farben, es sei denn, der Probe zeigt, dass sie die Seite wirklich dominieren.
• Primär = die Haupt-Chromfarbe des Logos, bestätigt durch die Website (Header, große Blöcke, Markenvariablen). Wenn Logo und Website unterschiedlich sind, bevorzuge das Logo und notiere es.
• Akzent = die Farbe der Hauptschaltflächen/CTAs der Website, wenn sie sich von der primären unterscheidet; sonst die zweite Farbe des Logos; sonst leite eine ab (komplementär oder warmer Kontrast) und markiere sie als derived.
• Sekundär nur, wenn die Marke eindeutig eine zweite Farbe verwendet. Fülle sie nicht um der Sache willen.
• Hintergrund, Oberfläche, Text, Gedämpft aus den tatsächlichen Hintergrund- und Textfarben der Website, für Bildschirme angepasst: reiner #000-Text → ein nahe-schwarzer, zur Primärfarbe hin getönter Farbton ist in Ordnung.
• Hervorhebung (optional): eine helle, gesättigte Farbe für Marker-Striche, wenn die Marke eine hat oder eine natürlich passt.
• Schriftarten aus dem Probe (oder statischen Scan): Überschrift = was Titel verwenden, Text = Fließtext.
• Stimme und Fakten aus den Überschriften, Meta- und Kontaktinformationen der Website: Slogan, gesprochener Name, Standard-CTA und Kontaktdaten, Tonwörter, zu vermeidende Behauptungen (nicht belegbare Superlative, Zahlen, die die Website nicht tatsächlich zeigt). Jeder Fakt erhält eine Quelle und ein Datum.

Setze status: draft, version: 1 (oder erhöhe), updated: <today>.

Schritt 5 – Asset-Bibliothek

Sammle die eigenen Bilder der Marke einmalig, damit jedes Video echte Personen, Produkte und Nachweise anstatt reiner Text-Szenen verwenden kann. Funktioniert für jedes Unternehmen – die Arten sind allgemein:

Art	Abgedeckte Inhalte
people	Gründer, Team, Mitarbeiter, Experten (Ärzte, Köche, Dozenten, Berater…)
offering	Produkte, Dienstleistungen, Kurse, Menüpunkte, Pakete, Pläne
testimonial	Kundenfotos, Bewertungs-Screenshots, Ergebnis-/Nachweisbilder
place	Räumlichkeiten, Geschäft, Klinik, Klassenzimmer, Büro, Veranstaltungen
work	Portfolio, Galerie, Projekte, Vorher/Nachher
proof	Auszeichnungen, Zertifikate, Partner-/Kundenlogos, Presse

1. node .claude/skills/brand-kit/scripts/collect-assets.mjs studio/brands/<slug> <site-url> (füge --pages url1,url2 für Seiten hinzu, die nicht übersehen werden sollen). Es wählt Seiten aller Arten aus, lädt die größte Version jedes Bildes herunter, verwirft Symbole/Duplikate/winzige Dateien und schreibt source/candidates.json (Größe, Qualität, geschätzte Art, Alt-Text, umgebender Text) sowie einen Kontaktbogen source/candidates-sheet.png.
2. Sieh dir den Bogen einmal an; verwende die Texte von candidates.json (Namen, Zitate, Bildunterschriften), um Motive zu identifizieren. Behalte, was ein Video tatsächlich verwenden könnte; überspringe Platzhalter, Material anderer Marken und nahe Duplikate.
3. Schreibe assets.json (Format im Schema-Referenzdokument): für jedes behaltene Bild seine candidate-ID, Zieldatei (<art>/<beschreibender-name>.jpg), art, motiv, einzeilige description, bakedText (true, wenn das Bild eingebrannten Text/Preise enthält), optional crop zum Entfernen eingebrannter Etiketten oder Ränder und source. Notiere zeitkritische Angaben (Preise, Daten) in der Beschreibung.
4. node .claude/skills/brand-kit/scripts/finalize-assets.mjs studio/brands/<slug> – kopiert/bereinigt die ausgewählten Dateien in assets/, zeichnet Größe und quality auf (full ≥ 700 px, card ≥ 300 px, avatar-only darunter) und entfernt die Kandidaten.
5. Füge die passenden Textfakten zu brand.json hinzu (jeweils mit Quelle + Datum): team (Name, Rolle, Qualifikationen, Asset-ID), offerings (Name, Detail, Asset-ID), testimonials (Name, kurzes wörtliches Zitat, Detail, Asset-ID) und proof falls vorhanden. Überprüfe Behauptungen anhand des Seitentextes, bevor du speicherst – Zitate sind wörtlich.

Teile dem Benutzer mit, die Nutzungsrechte mit dem Kunden für Fotos von Kunden zu bestätigen.

Schritt 6 – Erstellen und prüfen

node .claude/skills/brand-kit/scripts/build-kit.mjs studio/brands/<slug>

Es berechnet Aufhellfarben, Farbskalen, Kontrastprüfungen und Google-Fonts-Verfügbarkeit, schreibt sie in computed und rendert swatch.png. Behebe jede Warnung, die eine Behebung hat (passe muted/ink-Helligkeit an, ersetze eine Schriftart durch die nächstgelegene Google-Schriftart, wobei die Originale in original bleiben) und führe erneut aus, bis alles sauber ist oder bis das, was übrig bleibt, erklärt ist. Jede Warnung, die du akzeptierst anstatt zu beheben, wird zu einer einzeiligen Regel in usage (z. B. "Akzent ist eine Füllfarbe; niemals Akzenttext auf Weiß"), damit die Storyboard- und Render-Stufen sie respektieren. Sieh dir dann swatch.png einmal an – es ist das einzige Bild, das diese Skill anzeigen muss.

Schritt 7 – Freigabe

Zeige dem Benutzer den Swatch und eine kurze Zusammenfassung:

• jede Rolle → Hex, Farbname, Herkunft (markiere alles derived)
• Schriftarten (und alle Ersetzungen)
• verwendete Logodatei und welchen Hintergrund sie benötigt
• Slogan, Standard-CTA, Kontakt, Vermeidungsliste
• Asset-Bibliothek: Anzahl pro Art, alles mit niedriger Auflösung oder eingebrannten Preisen, der Hinweis zu Rechten
• alle verbleibenden Warnungen

Wende Änderungen an, die der Benutzer wünscht (vom Benutzer gesetzte Werte erhalten from: "user"), führe build-kit.mjs erneut aus, und sobald freigegeben, setze status: approved und führe es noch einmal aus, damit der Swatch den endgültigen Status anzeigt.

Übergabe

Wenn das Kit freigegeben ist, setze brand: <slug> in das brief.md des Videos, wenn ein Video in Bearbeitung ist, und teile dem Benutzer mit, welche Phasen es verwenden werden. Halte den Abschluss kurz: Kit-Pfad, Primär-/Akzent-Hex, Schriftarten.