visalnaqvi/video-generator-skill

Kit de marque

Crée un kit réutilisable par client dans studio/brands/<slug>/ :

studio/brands/<slug>/
├── brand.json          couleurs par rôle, polices, logo, voix, faits, équipe, offres, témoignages (+ contrôles calculés)
├── assets.json         index de la bibliothèque d'actifs (ce que chaque image montre, qualité, source)
├── assets/             personnes/ offres/ témoignages/ lieux/ travaux/ preuves/
├── swatch.png          une image de synthèse des couleurs
├── logo/               fichiers logo réellement utilisés
└── source/             résultat brut du scan (site.json, probe.json, candidates.json, contact sheets)

Les compétences storyboard et rendu lisent colors, fonts, logo et computed ; la compétence write lit voice et facts. Schéma et règles de rôles : references/brand-schema.md.

Les scripts font les mesures ; Claude fait le jugement. Lisez le JSON des scripts et leurs résumés console — ne lisez pas le HTML/CSS brut et ne prenez pas de captures d'écran plein écran pour trouver les couleurs. Exécutez les scripts depuis la racine du studio (node .claude/skills/brand-kit/scripts/...).

Étape 0 — Kit existant ?

Recherchez la marque parmi les kits existants avant d'en créer un nouveau : faites correspondre les mots de l'utilisateur avec chaque slug, name, aka et le site web dans sources de studio/brands/*/brand.json (par ex. "Stargate", "Sanjay Aggarwal Classes" et "stargate.net.in" sont le même kit). Uniquement si rien ne correspond, choisissez un nouveau slug court en kebab-case.

• Kit approuvé : répondez à partir de brand.json et montrez swatch.png — pas de scan, pas de scripts. Pour une question simple (« quelles sont les couleurs de Stargate ? ») répondez simplement. Ne reconstruisez que si l'utilisateur demande une actualisation ou une mise à jour.
• Kit en brouillon : reprenez à l'étape 7 (approbation) avec le swatch existant ; ne rescanez pas.
• Kit approuvé sans bibliothèque d'actifs (pas de assets.json) : exécutez uniquement l'étape 5, puis réapprouvez. Les storyboards le demandent lorsqu'ils ont besoin d'images.
• Actualisation : relancez depuis l'étape 1, conservez tout ce que l'utilisateur a défini manuellement (from: "user"), et incrémentez version.

Étape 1 — Rassembler les sources

Utilisez tout ce qui est disponible, dans cet ordre d'autorité :

1. Les instructions de l'utilisateur (« notre bleu est #1F3C88 ») — toujours prioritaires.
2. Les fichiers de guide de marque / logo que l'utilisateur donne ou place dans le dossier assets/ de la vidéo.
3. Le site web.

Demandez une fois tout ce qui changerait le résultat et qui n'est pas disponible — généralement juste : « Avez-vous le fichier du logo ou un guide de marque ? Sinon, je les prendrai sur le site. » Ne bloquez pas dessus.

Étape 2 — Scanner le site web

1. Scan statique (toujours) : node .claude/skills/brand-kit/scripts/site-extract.mjs <url> studio/brands/<slug>/source/site.json Donne les couleurs CSS (comptages site vs framework, variables CSS de la marque), polices, candidats logo, méta, contacts et titres.
2. Sonde rendue (quand le navigateur intégré est disponible — c'est plus précis car il mesure ce qui est réellement à l'écran) : ouvrez le site, puis exécutez le contenu de scripts/browser-probe.js avec javascript_tool. Sauvegardez son JSON dans source/probe.json. Il rapporte les couleurs d'arrière-plan par zone d'écran, les couleurs de texte par quantité de texte, les couleurs des boutons, les polices des titres et du corps, et les images de logo.

Si le scan statique ne trouve aucune couleur du site (site entièrement rendu en JS) et qu'aucun navigateur n'est disponible, fiez-vous au logo et dites-le.

Étape 3 — Logo

Choisissez le meilleur candidat (score, alt, taille, et les logos de la sonde) ; préférez SVG ou le plus grand PNG, évitez les favicons sauf si rien d'autre n'existe. Ensuite :

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

Ceci sauvegarde les fichiers et rapporte les couleurs réelles de chacun par part (pixels transparents ignorés) et son ton (arrière-plan nécessaire). Supprimez tout fichier téléchargé qui ne s'est pas avéré être le logo. Si seul un favicon ou une photo existe, dites-le à l'utilisateur et demandez un fichier logo approprié.

Étape 4 — Définir les rôles

Remplissez brand.json (format dans le schéma de référence). Règles de jugement :

• Les couleurs de la marque viennent de la marque, pas des plugins. Ignorez les couleurs framework et les valeurs par défaut du thème sauf si la sonde montre qu'elles dominent vraiment la page.
• Primaire = la couleur chromatique principale du logo, confirmée par le site (en-tête, gros blocs, variables de la marque). Si le logo et le site sont en désaccord, préférez le logo et notez-le.
• Accent = la couleur des boutons/CTA principaux du site si elle diffère de la primaire ; sinon la deuxième couleur du logo ; sinon dérivez-en une (complémentaire ou contraste chaud) et marquez-la derived.
• Secondaire seulement si la marque utilise clairement une deuxième couleur. Ne la remplissez pas pour le principe.
• Arrière-plan, surface, encre, atténué à partir des vraies couleurs d'arrière-plan et de texte du site, ajustées pour les écrans : du texte noir pur #000 → un noir presque noir teinté vers la primaire convient.
• Surlignage (optionnel) : une couleur claire et saturée pour les marqueurs, si la marque en a une ou si elle s'intègre naturellement.
• Polices de la sonde (ou scan statique) : titres = ce que les titres utilisent, corps = texte courant.
• Voix et faits à partir des titres, méta et contacts du site : accroche, nom parlé, CTA par défaut et coordonnées, mots de ton, affirmations à éviter (superlatifs non vérifiables, chiffres que le site ne montre pas réellement). Chaque fait a une source et une date.

Définissez status: draft, version: 1 (ou incrémentez), updated: <aujourd'hui>.

Étape 5 — Bibliothèque d'actifs

Collectez les images propres de la marque une fois, pour que chaque vidéo puisse utiliser de vraies personnes, produits et preuves au lieu de scènes texte seul. Fonctionne pour toute entreprise — les types sont généraux :

Type	Ce qu'il couvre
people	fondateurs, équipe, personnel, experts (médecins, chefs, professeurs, consultants…)
offering	produits, services, cours, éléments de menu, forfaits, plans
testimonial	photos de clients, captures d'avis, images de résultats/preuves
place	locaux, magasin, clinique, salle de classe, bureau, événements
work	portfolio, galerie, projets, avant/après
proof	récompenses, certificats, logos de partenaires/clients, presse

1. node .claude/skills/brand-kit/scripts/collect-assets.mjs studio/brands/<slug> <site-url> (ajoutez --pages url1,url2 pour les pages à ne pas manquer). Il sélectionne des pages de tous les types, télécharge la plus grande version de chaque image, supprime les icônes/doublons/fichiers minuscules, et écrit source/candidates.json (taille, qualité, type deviné, alt, texte proche) plus une planche contact source/candidates-sheet.png.
2. Regardez la planche une fois ; utilisez le texte de candidates.json (noms, citations, légendes) pour identifier les sujets. Gardez ce qu'une vidéo pourrait réellement utiliser ; ignorez les espaces réservés, le matériel d'autres marques et les quasi-doublons.
3. Écrivez assets.json (format dans le schéma de référence) : pour chaque image conservée, son candidate id, file cible (<type>/<nom-descriptif>.jpg), kind, subject, description d'une ligne, bakedText (true si l'image a du texte/prix imprimé), crop optionnel pour supprimer les étiquettes ou bordures incrustées, et source. Notez tout élément sensible au temps (prix, dates) dans la description.
4. node .claude/skills/brand-kit/scripts/finalize-assets.mjs studio/brands/<slug> — copie/recadre les fichiers choisis dans assets/, enregistre la taille et la quality (full ≥ 700 px, card ≥ 300 px, avatar-only en dessous), supprime les candidats.
5. Ajoutez les faits textuels correspondants à brand.json (chacun avec source + date) : team (nom, rôle, diplômes, id d'actif), offerings (nom, détail, id d'actif), testimonials (nom, courte citation textuelle, détail, id d'actif), et proof le cas échéant. Vérifiez les affirmations par rapport au texte de la page avant de sauvegarder — les citations sont textuelles.

Dites à l'utilisateur de confirmer les droits d'utilisation avec le client pour les photos de clients.

Étape 6 — Construire et vérifier

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

Il calcule les couleurs sur fond, les échelles de teinte, les vérifications de contraste et la disponibilité des Google Fonts, les écrit dans computed, et rend swatch.png. Corrigez chaque avertissement qui a une solution (ajustez la luminosité de muted/ink, remplacez une police par la Google Font la plus proche en conservant l'originale dans original) et relancez jusqu'à ce que ce soit propre ou que ce qui reste soit expliqué. Chaque avertissement que vous acceptez au lieu de corriger devient une règle d'une ligne dans usage (par ex. « l'accent est une couleur de remplissage ; jamais de texte accent sur fond blanc »), afin que les étapes de storyboard et de rendu la respectent. Ensuite, regardez swatch.png une fois — c'est la seule image que cette compétence a besoin de voir.

Étape 7 — Approuver

Montrez à l'utilisateur le swatch et un court résumé :

• chaque rôle → hex, nom de couleur, provenance (signalez tout derived)
• polices (et toute substitution)
• fichier logo utilisé et l'arrière-plan nécessaire
• accroche, CTA par défaut, contacts, liste d'évitement
• bibliothèque d'actifs : effectifs par type, éléments en basse résolution ou avec prix incrustés, note sur les droits
• avertissements restants

Appliquez les changements demandés par l'utilisateur (les valeurs définies par l'utilisateur reçoivent from: "user"), relancez build-kit.mjs, et une fois approuvé, définissez status: approved et relancez une fois de plus pour que le swatch affiche le statut final.

Transmission

Lorsque le kit est approuvé, mettez brand: <slug> dans le brief.md de la vidéo si une vidéo est en cours, et dites à l'utilisateur quelles étapes l'utiliseront. Gardez la conclusion brève : chemin du kit, hex primaire/accent, polices.